Thomas/update case status (#583)

packages/app-builder/src/components/Cases/CaseEvents.tsx

@@ -27,7 +27,7 @@ import { Icon, type IconName } from 'ui-icons';
 import { ReviewStatusTag } from '../Decisions/ReviewStatusTag';
 import { Spinner } from '../Spinner';
 import { casesI18n } from './cases-i18n';
-import { caseStatusMapping, caseStatusVariants } from './CaseStatus';
+import { CaseStatus } from './CaseStatus';
 import { CaseTags } from './CaseTags';
 import { CopyPivotValue } from './PivotValue';
 
@@ -125,13 +125,7 @@ export function getEventIcon(event: CaseEvent) {
       );
     case 'status_updated': {
       return (
-        <EventIcon
-          className={caseStatusVariants({
-            color: caseStatusMapping[event.newStatus].color,
-            variant: 'contained',
-          })}
-          icon="manage-search"
-        />
+        <EventIcon className="bg-blue-10 text-blue-100" icon="manage-search" />
       );
     }
     case 'file_added':
@@ -251,18 +245,9 @@ export function getEventTitle(
             i18nKey="cases:case_detail.history.event_title.status_updated"
             components={{
               Status: (
-                <span
-                  className={caseStatusVariants({
-                    color: caseStatusMapping[event.newStatus].color,
-                    variant: 'text',
-                    className: 'capitalize',
-                  })}
-                />
+                <CaseStatus status={event.newStatus} size="small" type="full" />
               ),
             }}
-            values={{
-              status: t(caseStatusMapping[event.newStatus].tKey),
-            }}
           />
         </span>
       );

packages/app-builder/src/components/Cases/CaseStatus.tsx

@@ -1,69 +1,91 @@
 import { type CaseStatus } from '@app-builder/models/cases';
-import { cva, cx, type VariantProps } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import { type ParseKeys } from 'i18next';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tooltip } from 'ui-design-system';
 
 import { casesI18n } from './cases-i18n';
 
-export const caseStatusVariants = cva(undefined, {
-  variants: {
-    color: {
-      red: 'text-red-100',
-      blue: 'text-blue-100',
-      grey: 'text-grey-50',
-      green: 'text-green-100',
-    },
-    variant: {
-      text: undefined,
-      contained: undefined,
+export const caseStatusVariants = cva(
+  'inline-flex items-center justify-center rounded shrink-0',
+  {
+    variants: {
+      color: {
+        red: 'text-red-100 bg-red-10',
+        blue: 'text-blue-100 bg-blue-10',
+        grey: 'text-grey-50 bg-grey-10',
+        green: 'text-green-100 bg-green-10',
+      },
+      size: {
+        small: undefined,
+        big: undefined,
+      },
+      type: {
+        'first-letter': 'isolate capitalize text-s font-medium',
+        full: 'px-2 w-fit capitalize text-s font-semibold',
+      },
     },
+    compoundVariants: [
+      {
+        size: 'small',
+        type: 'full',
+        className: 'h-6',
+      },
+      {
+        size: 'big',
+        type: 'full',
+        className: 'h-10',
+      },
+      {
+        size: 'small',
+        type: 'first-letter',
+        className: 'size-6',
+      },
+      {
+        size: 'big',
+        type: 'first-letter',
+        className: 'size-8',
+      },
+    ],
   },
-  compoundVariants: [
-    {
-      variant: 'contained',
-      color: 'red',
-      className: 'bg-red-10',
-    },
-    {
-      variant: 'contained',
-      color: 'blue',
-      className: 'bg-blue-10',
-    },
-    {
-      variant: 'contained',
-      color: 'grey',
-      className: 'bg-grey-10',
-    },
-    {
-      variant: 'contained',
-      color: 'green',
-      className: 'bg-green-10',
-    },
-  ],
-});
+);
 
 export function CaseStatus({
   status,
-  className,
+  size,
+  type,
 }: {
   status: CaseStatus;
-  className?: string;
+  size?: VariantProps<typeof caseStatusVariants>['size'];
+  type?: VariantProps<typeof caseStatusVariants>['type'];
 }) {
   const { t } = useTranslation(casesI18n);
   const { color, tKey } = caseStatusMapping[status];
+  const caseStatusLetter = t(tKey);
+
+  if (type === 'full') {
+    return (
+      <div className={caseStatusVariants({ color, size, type: 'full' })}>
+        {caseStatusLetter}
+      </div>
+    );
+  }
 
   return (
-    <Tooltip.Default content={t(tKey)}>
+    <Tooltip.Default
+      content={
+        <div
+          className={caseStatusVariants({ color, size: 'big', type: 'full' })}
+        >
+          {caseStatusLetter}
+        </div>
+      }
+    >
       <div
-        className={cx(
-          caseStatusVariants({ color, variant: 'contained' }),
-          'text-s flex shrink-0 items-center justify-center rounded font-semibold capitalize',
-          className,
-        )}
+        className={caseStatusVariants({ color, size, type: 'first-letter' })}
       >
-        {t(tKey)[0]}
+        {caseStatusLetter[0]}
       </div>
     </Tooltip.Default>
   );

packages/app-builder/src/components/Cases/CasesList.tsx

@@ -34,7 +34,7 @@ export function CasesList({
         header: t('cases:case.status'),
         size: 50,
         cell: ({ getValue }) => (
-          <CaseStatus className="size-8" status={getValue()} />
+          <CaseStatus size="big" type="first-letter" status={getValue()} />
         ),
       }),
       columnHelper.accessor(({ name }) => name, {

packages/app-builder/src/components/Cases/Filters/FilterDetail/StatusesFilter.tsx

@@ -33,10 +33,7 @@ export function StatusesFilter() {
                 value={status.value}
                 className="align-baseline"
               >
-                <CaseStatus className="size-6" status={status.value} />
-                <span className="text-grey-100 text-s font-normal first-letter:capitalize">
-                  {status.label}
-                </span>
+                <CaseStatus type="full" size="big" status={status.value} />
               </SelectWithCombobox.ComboboxItem>
             );
           })}

packages/app-builder/src/components/CopyToClipboardButton.tsx

@@ -1,4 +1,5 @@
 import { useGetCopyToClipboard } from '@app-builder/utils/use-get-copy-to-clipboard';
+import clsx from 'clsx';
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { Icon } from 'ui-icons';
 
@@ -7,12 +8,18 @@ export const CopyToClipboardButton = forwardRef<
   ComponentPropsWithoutRef<'div'> & {
     toCopy: string;
   }
->(function CopyToClipboardButton({ children, toCopy, ...props }, ref) {
+>(function CopyToClipboardButton(
+  { children, className, toCopy, ...props },
+  ref,
+) {
   const getCopyToClipboardProps = useGetCopyToClipboard();
   return (
     <div
       ref={ref}
-      className="border-grey-10 text-grey-100 flex min-h-8 w-fit cursor-pointer select-none items-center gap-3 break-all rounded border px-2 font-normal"
+      className={clsx(
+        'border-grey-10 text-grey-100 hover:bg-grey-05 active:bg-grey-10 flex min-h-8 w-fit shrink-0 cursor-pointer select-none items-center gap-3 break-all rounded border px-2 font-normal transition-colors',
+        className,
+      )}
       {...getCopyToClipboardProps(toCopy)}
       {...props}
     >

packages/app-builder/src/components/Data/TableDetails.tsx

@@ -127,7 +127,7 @@ export function TableDetails({ tableModel, dataModel }: TableDetailsProps) {
                     description={tableModel.description || ''}
                   />
                   <Icon
-                    icon="edit"
+                    icon="edit-square"
                     className="group-hover:text-grey-100 relative size-6 text-transparent transition-colors ease-in-out"
                   />
                 </div>
@@ -282,7 +282,7 @@ function TableDetailFields({
                   linksToThisTable={linksToThisTable}
                 >
                   <div className="group-hover:text-grey-100 group-hover:bg-grey-02 group-hover:border-grey-50 group-hover:hover:bg-grey-05 group-hover:active:bg-grey-10 relative cursor-pointer rounded border p-2 text-transparent transition-colors ease-in-out">
-                    <Icon icon="edit" className="size-6" />
+                    <Icon icon="edit-square" className="size-6" />
                   </div>
                 </EditField>
               ) : null}

packages/app-builder/src/components/Data/TableModelNode.tsx

@@ -292,7 +292,7 @@ function EditDataModelField({
         disabled={displayPivot}
         className="group-hover:text-grey-100 focus:text-grey-100 block overflow-hidden text-transparent after:absolute after:inset-0 after:content-['']"
       >
-        <Icon icon="edit" className="size-5" />
+        <Icon icon="edit-square" className="size-5" />
       </button>
     </EditField>
   );
@@ -330,7 +330,7 @@ function MoreMenu({ data }: { data: TableModelNodeData }) {
     menuItems.push(
       <EditTable key="edit-description" table={data.original}>
         <SchemaMenuMenuItem>
-          <Icon icon="edit" className="size-6" />
+          <Icon icon="edit-square" className="size-6" />
           {t('data:edit_table.title')}
         </SchemaMenuMenuItem>
       </EditTable>,

packages/app-builder/src/components/Decisions/DecisionDetail.tsx

@@ -52,7 +52,11 @@ export function DecisionDetail({ decision }: { decision: DecisionDetail }) {
           <DetailLabel>{t('decisions:case')}</DetailLabel>
           {caseDetail ? (
             <div className="flex w-fit flex-row items-center justify-center gap-1 align-baseline">
-              <CaseStatus className="size-6" status={caseDetail.status} />
+              <CaseStatus
+                size="small"
+                type="first-letter"
+                status={caseDetail.status}
+              />
               <Link
                 to={getRoute('/cases/:caseId', {
                   caseId: fromUUID(caseDetail.id),

packages/app-builder/src/components/Decisions/DecisionsList.tsx

@@ -182,7 +182,8 @@ export function DecisionsList({
           row.original.case ? (
             <div className="flex w-fit flex-row items-center justify-center gap-2 align-baseline">
               <CaseStatus
-                className="isolate size-8"
+                size="big"
+                type="first-letter"
                 status={row.original.case.status}
               />
               <Tooltip.Default content={getValue()}>

packages/app-builder/src/components/Scenario/AstBuilder/AstBuilderNode/Operand/OperandEditor/OperandEditorProvider.tsx

@@ -250,7 +250,7 @@ export function useBottomOptions() {
 
     if (isEditableAstNode(initialAstNode)) {
       bottomOptions.push({
-        icon: 'edit',
+        icon: 'edit-square',
         label: t('common:edit'),
         onSelect: () => {
           onEdit(initialAstNode);

packages/app-builder/src/locales/en/cases.json

@@ -54,7 +54,7 @@
   "case_detail.history.event_title.inbox_changed": "Inbox changed",
   "case_detail.history.event_title.rule_snooze_created": "Rule snooze created",
   "case_detail.history.event_title.decision_reviewed": "Decision reviewed",
-  "case_detail.history.event_title.status_updated": "New status: <Status>{{status}}</Status>",
+  "case_detail.history.event_title.status_updated": "New status: <Status/>",
   "case_detail.history.event_title.file_added": "File added: <Name>{{name}}</Name>",
   "case_detail.history.event_detail.added_by": "Added by: <Avatar/> <User>{{user}}</User>",
   "case_detail.history.event_detail.added_by_workflow": "Added by workflow",
@@ -93,8 +93,8 @@
   "case_detail.review_decision": "Review",
   "filters.date_range.title": "creation date is:",
   "change_status_modal.title": "Change Case’s status",
-  "change_status_modal.description.from": "from <Status>{{status}}</Status>",
-  "change_status_modal.description.to": "to <Status>{{status}}</Status>",
+  "change_status_modal.description.from": "from <Status/>",
+  "change_status_modal.description.to": "to <Status/>",
   "change_status_modal.change_status": "Change status",
   "inbox.need_first_inbox": "Create a first inbox to start using the case manager",
   "inbox.need_inbox_contact_admin": "Please contact your admin to get access to an inbox",

packages/app-builder/src/locales/fr/cases.json

@@ -73,7 +73,7 @@
   "case_detail.history.event_title.inbox_changed": "Boîte de réception modifiée",
   "case_detail.history.event_title.name_updated": "Nouveau nom : <Name>{{name}}</Name>",
   "case_detail.history.event_title.rule_snooze_created": "Règle mise en veille",
-  "case_detail.history.event_title.status_updated": "Nouveau statut : <Status>{{status}}</Status>",
+  "case_detail.history.event_title.status_updated": "Nouveau statut : <Status/>",
   "case_detail.history.event_title.tags_updated": "Labels mis à jour",
   "case_detail.informations": "Informations",
   "case_detail.no_decisions": "Ajoutez une décision de la <Link>liste de décisions</Link> pour commencer l'enquête",
@@ -93,8 +93,8 @@
   "case_detail.unknown_tag": "label inconnu",
   "case_detail.unknown_user": "utilisateur inconnu",
   "change_status_modal.change_status": "Changer de statut",
-  "change_status_modal.description.from": "de <Status>{{status}}</Status>",
-  "change_status_modal.description.to": "à <Status>{{status}}</Status>",
+  "change_status_modal.description.from": "de <Status/>",
+  "change_status_modal.description.to": "à <Status/>",
   "change_status_modal.title": "Changer le statut de l'investigation",
   "drop_file_accepted_types": "jpg, png, pdf, zip, doc, docx, xls, xlsx",
   "drop_file_cta": "Déposez n’importe quel fichier ici pour le joindre à l’investigation. \nLes extensions suivantes sont prises en charge :",

packages/app-builder/src/routes/_builder+/cases+/$caseId.tsx

@@ -139,7 +139,7 @@ export default function CasePage() {
           <Page.BackButton />
           <span className="line-clamp-2 text-left">{caseDetail.name}</span>
           <CopyToClipboardButton toCopy={caseDetail.id}>
-            <span className="text-s line-clamp-1 font-normal">
+            <span className="text-s line-clamp-1 max-w-40 font-normal">
               <span className="font-medium">ID</span> {caseDetail.id}
             </span>
           </CopyToClipboardButton>

packages/app-builder/src/routes/_builder+/decisions+/$decisionId.tsx

@@ -132,7 +132,7 @@ export default function DecisionPage() {
               {t('decisions:decision')}
             </span>
             <CopyToClipboardButton toCopy={decision.id}>
-              <span className="text-s line-clamp-1 font-normal">
+              <span className="text-s line-clamp-1 max-w-40 font-normal">
                 <span className="font-medium">ID</span> {decision.id}
               </span>
             </CopyToClipboardButton>