From 3da1aa8d1623fd05ac56a7f5d1237f496abe1bf8 Mon Sep 17 00:00:00 2001
From: Thomas Lathuiliere <40292402+balzdur@users.noreply.github.com>
Date: Mon, 27 May 2024 12:13:24 +0200
Subject: [PATCH] feat(DecisionsList): add pivot value column (#457)

* feat(api): add pivot_values to case detail

* feat(DecisionsList): add pivot value column
---
 .../public/locales/en/decisions.json          |  1 +
 .../components/Decisions/DecisionsList.tsx    | 33 ++++++++++++++++---
 packages/app-builder/src/models/cases.ts      | 10 ++++++
 .../routes/_builder+/decisions+/_index.tsx    |  3 ++
 packages/marble-api/scripts/openapi.yaml      | 21 +++++++-----
 .../marble-api/src/generated/marble-api.ts    |  1 +
 6 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/packages/app-builder/public/locales/en/decisions.json b/packages/app-builder/public/locales/en/decisions.json
index dd7b660be..21d925992 100644
--- a/packages/app-builder/public/locales/en/decisions.json
+++ b/packages/app-builder/public/locales/en/decisions.json
@@ -5,6 +5,7 @@
   "detail.scenario_name_runs_on": "<ScenarioName>{{scenarioName}}</ScenarioName> (runs on <TriggerObjectType>{{triggerObjectType}}</TriggerObjectType>)",
   "detail.error": "An error as occured. Make sure the provided decision id is valid.",
   "trigger_object.type": "Trigger object",
+  "pivot_value": "Pivot value",
   "filters.has_case": "Presence of a case",
   "filters.pivot_value": "Pivot value",
   "filters.date_range.title": "creation date is:",
diff --git a/packages/app-builder/src/components/Decisions/DecisionsList.tsx b/packages/app-builder/src/components/Decisions/DecisionsList.tsx
index b4920c6cc..7099ffaec 100644
--- a/packages/app-builder/src/components/Decisions/DecisionsList.tsx
+++ b/packages/app-builder/src/components/Decisions/DecisionsList.tsx
@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Checkbox, Table, useVirtualTable } from 'ui-design-system';
+import { Checkbox, Table, Tooltip, useVirtualTable } from 'ui-design-system';
 
 import { Score } from './Score';
 
@@ -26,6 +26,7 @@ type Column =
   | 'scenario_name'
   | 'trigger_object_type'
   | 'case'
+  | 'pivot_value'
   | 'score'
   | 'outcome';
 
@@ -44,6 +45,10 @@ export interface DecisionViewModel {
     name: string;
     status: TCaseStatus;
   };
+  pivotValues: {
+    id?: string;
+    value?: string;
+  }[];
   score: number;
   outcome: TOutcome;
 }
@@ -161,7 +166,7 @@ export function DecisionsList({
       columnHelper.accessor((row) => row.scenario.version, {
         id: 'scenario_version',
         header: 'Vi',
-        size: 20,
+        size: 50,
         cell: ({ getValue, row }) => (
           <Link
             to={getRoute('/scenarios/:scenarioId/i/:iterationId', {
@@ -178,12 +183,12 @@ export function DecisionsList({
       columnHelper.accessor((row) => row.triggerObjectType, {
         id: 'trigger_object_type',
         header: t('decisions:trigger_object.type'),
-        size: 200,
+        size: 150,
       }),
       columnHelper.accessor((row) => row.case?.name ?? '-', {
         id: 'case',
         header: t('decisions:case'),
-        size: 200,
+        size: 150,
         cell: ({ getValue, row }) =>
           row.original.case ? (
             <div className="flex w-fit flex-row items-center justify-center gap-1">
@@ -204,6 +209,26 @@ export function DecisionsList({
             </span>
           ),
       }),
+      columnHelper.accessor((row) => row.pivotValues, {
+        id: 'pivot_value',
+        header: t('decisions:pivot_value'),
+        size: 100,
+        cell: ({ getValue }) => {
+          const pivotValues = getValue() ?? [];
+          if (pivotValues.length === 0) return null;
+          return (
+            <div className="relative flex flex-col gap-1">
+              {pivotValues.map((pivotValue) => (
+                <Tooltip.Default key={pivotValue.id} content={pivotValue.value}>
+                  <span className="text-grey-100 text-s line-clamp-1 text-ellipsis">
+                    {pivotValue.value}
+                  </span>
+                </Tooltip.Default>
+              ))}
+            </div>
+          );
+        },
+      }),
       columnHelper.accessor((row) => row.score, {
         id: 'score',
         header: t('decisions:score'),
diff --git a/packages/app-builder/src/models/cases.ts b/packages/app-builder/src/models/cases.ts
index e31ce8ac0..e2b135064 100644
--- a/packages/app-builder/src/models/cases.ts
+++ b/packages/app-builder/src/models/cases.ts
@@ -66,6 +66,10 @@ export interface CaseDetail
     triggerObject: Record<string, unknown>;
     triggerObjectType: string;
     outcome: Outcome;
+    pivotValues: {
+      id?: string;
+      value?: string;
+    }[];
     scenario: {
       id: string;
       name: string;
@@ -92,6 +96,12 @@ export function adaptCaseDetailDto({
       triggerObject: decisionDto.trigger_object,
       triggerObjectType: decisionDto.trigger_object_type,
       outcome: decisionDto.outcome,
+      pivotValues: decisionDto.pivot_values.map(
+        ({ pivot_id, pivot_value }) => ({
+          id: pivot_id ?? undefined,
+          value: pivot_value ?? undefined,
+        }),
+      ),
       scenario: {
         id: decisionDto.scenario.id,
         name: decisionDto.scenario.name,
diff --git a/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx b/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
index 541f4533f..b481b0e68 100644
--- a/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
+++ b/packages/app-builder/src/routes/_builder+/decisions+/_index.tsx
@@ -165,6 +165,9 @@ export default function Decisions() {
                 decisions={decisions}
                 selectable
                 selectionProps={selectionProps}
+                columnVisibility={{
+                  pivot_value: false,
+                }}
               />
               <CursorPaginationButtons
                 items={decisions}
diff --git a/packages/marble-api/scripts/openapi.yaml b/packages/marble-api/scripts/openapi.yaml
index 23831fcaa..38b4fda17 100644
--- a/packages/marble-api/scripts/openapi.yaml
+++ b/packages/marble-api/scripts/openapi.yaml
@@ -3784,14 +3784,6 @@ components:
               type: array
               items:
                 type: object
-                required:
-                  - id
-                  - created_at
-                  - trigger_object
-                  - trigger_object_type
-                  - outcome
-                  - scenario
-                  - score
                 properties:
                   id:
                     type: string
@@ -3805,6 +3797,10 @@ components:
                     type: string
                   outcome:
                     $ref: '#/components/schemas/Outcome'
+                  pivot_values:
+                    type: array
+                    items:
+                      $ref: '#/components/schemas/PivotValueDto'
                   scenario:
                     type: object
                     required:
@@ -3830,6 +3826,15 @@ components:
                     type: integer
                   error:
                     $ref: '#/components/schemas/Error'
+                required:
+                  - id
+                  - created_at
+                  - trigger_object
+                  - trigger_object_type
+                  - outcome
+                  - pivot_values
+                  - scenario
+                  - score
             events:
               type: array
               items:
diff --git a/packages/marble-api/src/generated/marble-api.ts b/packages/marble-api/src/generated/marble-api.ts
index 30fb9e648..d47ce48b9 100644
--- a/packages/marble-api/src/generated/marble-api.ts
+++ b/packages/marble-api/src/generated/marble-api.ts
@@ -207,6 +207,7 @@ export type CaseDetailDto = Case & {
         };
         trigger_object_type: string;
         outcome: Outcome;
+        pivot_values: PivotValueDto[];
         scenario: {
             id: string;
             name: string;