Add query for edit analysis dashboard

the-deep · Jul 19, 2024 · 1f6da74 · 1f6da74
1 parent f1d79b4
commit 1f6da74
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 249 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/AnalysisCloneModal/index.tsx b/app/views/AnalysisDashboard/Analysis/AnalysisCloneModal/index.tsx
@@ -88,22 +88,6 @@ function AnalysisCloneModal(props: Props) {
 
     const error = getErrorObject(riskyError);
 
-    /*
-    const {
-        pending: pendingAnalysisGet,
-    } = useRequest<AnalysisElement>({
-        url: `server://projects/${projectId}/analysis/${analysisId}/`,
-        method: 'GET',
-        onSuccess: (response) => {
-            setValue({
-                title: response.title,
-                startDate: response.startDate,
-                endDate: response.endDate,
-            });
-        },
-    });
-    */
-
     const {
         pending: pendingAnalysisClone,
         trigger: triggerAnalysisClone,

diff --git a/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx b/app/views/AnalysisDashboard/Analysis/AnalysisPillar/index.tsx
@@ -35,10 +35,11 @@ export interface Props {
     title: string;
     createdAt: string;
     onDelete: (value: number) => void;
+    pendingPillarDelete: boolean;
     pillarId: PillarSummary['id']; projectId: string;
     className?: string;
     totalEntries: number;
-    analyzedEntries?: number;
+    analyzedEntries?: number | undefined;
 }
 
 function AnalysisPillar(props: Props) {
@@ -53,6 +54,7 @@ function AnalysisPillar(props: Props) {
         statements,
         className,
         totalEntries,
+        pendingPillarDelete,
         analyzedEntries = 0,
     } = props;
 
@@ -72,6 +74,7 @@ function AnalysisPillar(props: Props) {
     }
 
     const onDeleteConfirmClick = useCallback(() => {
+        // TODO: Remove Number in pillarId
         onDelete(Number(pillarId));
     }, [onDelete, pillarId]);
 
@@ -89,6 +92,8 @@ function AnalysisPillar(props: Props) {
         value: data.statement,
     }), []);
 
+    const disabled = pendingPillarDelete;
+
     return (
         <Container
             className={_cs(styles.analysisPillar, className)}
@@ -109,7 +114,7 @@ function AnalysisPillar(props: Props) {
                             analysisId,
                             pillarAnalysisId: pillarId,
                         }}
-                        disabled={undefined}
+                        disabled={disabled}
                         variant="tertiary"
                         icons={(
                             <FiEdit2 />
@@ -123,7 +128,7 @@ function AnalysisPillar(props: Props) {
                             onConfirm={onDeleteConfirmClick}
                             title={_ts('analysis', 'deletePillarButtonTitle')}
                             message={_ts('analysis', 'deletePillarConfirmMessage')}
-                            disabled={undefined}
+                            disabled={disabled}
                             showConfirmationInitially={false}
                             variant="secondary"
                         >

diff --git a/app/views/AnalysisDashboard/Analysis/PillarAssignment/index.tsx b/app/views/AnalysisDashboard/Analysis/PillarAssignment/index.tsx
@@ -5,7 +5,7 @@ import _ts from '#ts';
 
 import styles from './styles.css';
 
-interface Props {
+export interface Props {
     className?: string;
     assigneeName: string | null | undefined;
     pillarTitle: string;
@@ -36,13 +36,13 @@ function PillarAssignment(props: Props) {
                 className={styles.assigneeName}
                 title={isDefined(assigneeName) ? assigneeName : undefined}
             >
-                {assigneeName}
+                { assigneeName }
             </div>
             <div
                 className={styles.pillarTitle}
                 title={pillarTitle}
             >
-                {pillarTitle}
+                { pillarTitle }
             </div>
             <div
                 className={_cs(
@@ -51,7 +51,7 @@ function PillarAssignment(props: Props) {
                 )}
                 title={statusLabel}
             >
-                {statusLabel}
+                { statusLabel }
             </div>
         </div>
     );

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';
@@ -26,7 +24,7 @@ interface Props {
     activeProject: string;
     onAnalysisPillarDelete: () => void;
     analysisId: string;
-    totalEntries: number;
+    totalEntries: number | undefined;
     pillars: PillarSummary[] | null | undefined;
     pillarsPending: boolean;
 }
@@ -59,6 +57,7 @@ function AnalysisDetails(props: Props) {
             title: data.title,
             totalEntries,
         }), [
+            onAnalysisPillarDelete,
             totalEntries,
             createdAt,
             analysisId,
@@ -71,7 +70,7 @@ function AnalysisDetails(props: Props) {
             className={_cs(className, styles.container)}
             spacing="none"
             contentClassName={styles.content}
-            footerActions={((totalEntries ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
+            footerActions={((pillars?.length ?? 0) / MAX_ITEMS_PER_PAGE) > 1 ? (
                 <Pager
                     activePage={activePage}
                     itemsCount={pillars?.length ?? 0}

diff --git a/app/views/AnalysisDashboard/Analysis/index.tsx b/app/views/AnalysisDashboard/Analysis/index.tsx
@@ -47,7 +47,7 @@ import {
 
 import _ts from '#ts';
 import PillarAnalysisList from './PillarList';
-import PillarAssignment from './PillarAssignment';
+import PillarAssignment, { type Props as PillarAssignmentItemProps } from './PillarAssignment';
 import AnalysisCloneModal from './AnalysisCloneModal';
 import ReportsModal from '../ReportsModal';
 
@@ -101,7 +101,7 @@ const barChartMargin = {
 const BAR_TICK_COUNT = 5;
 const MAX_BAR_SIZE = 16;
 
-interface ComponentProps {
+export interface Props {
     analysisId: string;
     className?: string;
     title: string;
@@ -116,15 +116,15 @@ interface ComponentProps {
     pendingAnalysisDelete: boolean;
     pillars?: PillarSummary[] | null | undefined;
     pillarsPending: boolean;
-    totalEntries: number;
-    totalSources: number;
-    analyzedEntries: number;
-    analyzedLeads: number;
+    totalEntries: number | undefined;
+    totalSources: number | undefined;
+    analyzedEntries: number | undefined;
+    analyzedLeads: number | undefined;
 }
 
 const pillarSummaryKeySelector = (item: PillarSummary) => (item.id);
 
-function Analysis(props: ComponentProps) {
+function Analysis(props: Props) {
     const {
         title,
         className,
@@ -167,7 +167,7 @@ function Analysis(props: ComponentProps) {
     const alert = useAlert();
 
     const pillarAssignmentRendererParams = useCallback(
-        (_: string, data: PillarSummary) => ({
+        (_: string, data: PillarSummary): PillarAssignmentItemProps => ({
             assigneeName: data.assignee?.displayName,
             pillarTitle: data.title,
             analyzedEntries: data.analyzedEntriesCount,
@@ -230,14 +230,16 @@ function Analysis(props: ComponentProps) {
         onDelete(analysisId);
     }, [analysisId, onDelete]);
 
-    const barChartData = useMemo(() => (
-        pillars?.map((o) => ({
+    const barChartData = useMemo(() => {
+        if (!pillars || totalEntries === undefined) return [];
+
+        return pillars.map((o) => ({
             ...o,
             percent: Math.round(
                 ((o.analyzedEntriesCount ?? 0) / (totalEntries === 0 ? 1 : totalEntries)) * 10000,
             ) / 100,
-        }))
-    ), [pillars, totalEntries]);
+        }));
+    }, [pillars, totalEntries]);
 
     const disabled = pendingAnalysisDelete;
 
@@ -249,6 +251,11 @@ function Analysis(props: ComponentProps) {
     const canTagEntry = project?.analysisFramework?.id
         && project?.allowedPermissions?.includes('UPDATE_ENTRY');
 
+    const safeAnalyzedLeads = analyzedLeads ?? 0;
+    const safeTotalSource = totalSources ?? 1;
+    const safeAnalyzedEntries = analyzedEntries ?? 0;
+    const safeTotalEntries = totalEntries ?? 1;
+
     return (
         <ContainerCard
             className={_cs(className, styles.analysisItem)}
@@ -365,12 +372,12 @@ function Analysis(props: ComponentProps) {
                     contentClassName={styles.overviewContent}
                 >
                     <ProgressLine
-                        progress={(analyzedLeads / totalSources) * 100}
+                        progress={(safeAnalyzedLeads / safeTotalSource) * 100}
                         title={_ts('analysis', 'sourcesAnalyzedLabel')}
                         variant="complement1"
                     />
                     <ProgressLine
-                        progress={(analyzedEntries / totalEntries) * 100}
+                        progress={(safeAnalyzedEntries / safeTotalEntries) * 100}
                         title={_ts('analysis', 'entriesAnalyzedLabel')}
                         variant="complement2"
                     />
@@ -427,7 +434,7 @@ function Analysis(props: ComponentProps) {
             <ExpandableContainer
                 className={styles.pillarAnalyses}
                 headerClassName={styles.pillarAnalysesHeader}
-                heading={_ts('analysis', 'pillarAnalysisCount', { count: pillars?.length })}
+                heading={`Analysis ${pillars?.length}`}
                 headingSize="extraSmall"
                 alwaysMountedContent={false}
                 contentClassName={styles.pillarAnalysisList}

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