[frontend] due date display in Tasks list (#4647)

OpenCTI-Platform · Oct 19, 2023 · 7181eda · 7181eda
1 parent cf4e0b8
commit 7181eda
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 48 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemDueDate.tsx b/opencti-platform/opencti-front/src/components/ItemDueDate.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Chip from '@mui/material/Chip';
+import makeStyles from '@mui/styles/makeStyles';
+import { useFormatter } from './i18n';
+
+const useStyles = makeStyles(() => ({
+  chip: {
+    borderRadius: 5,
+  },
+  chipInList: {
+    fontSize: 12,
+    height: 20,
+    float: 'left',
+    width: 120,
+    borderRadius: 5,
+  },
+}));
+
+const ItemDueDate = ({ due_date, variant }: { due_date: string | null, variant: string }) => {
+  const { fld, fldt } = useFormatter();
+  const classes = useStyles();
+  const isoDate = new Date().toISOString();
+  const style = variant === 'inList' ? classes.chipInList : classes.chip;
+  const label = variant === 'inList' ? fld(due_date) : fldt(due_date);
+  if (due_date) {
+    return (
+      <Chip
+        classes={{ root: style }}
+        variant="outlined"
+        label={label}
+        color={due_date < isoDate ? 'error' : 'info'}
+      />
+    );
+  }
+  return (
+    <>-</>
+  );
+};
+
+export default ItemDueDate;
diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskDetails.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskDetails.tsx
@@ -4,14 +4,10 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
 import makeStyles from '@mui/styles/makeStyles';
-import Chip from '@mui/material/Chip';
 import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
 import { useFormatter } from '../../../../components/i18n';
-import {
-  TaskDetails_task$data,
-  TaskDetails_task$key,
-} from './__generated__/TaskDetails_task.graphql';
-import FieldOrEmpty from '../../../../components/FieldOrEmpty';
+import { TaskDetails_task$data, TaskDetails_task$key } from './__generated__/TaskDetails_task.graphql';
+import ItemDueDate from '../../../../components/ItemDueDate';
 
 const useStyles = makeStyles(() => ({
   paper: {
@@ -21,9 +17,6 @@ const useStyles = makeStyles(() => ({
     padding: '15px',
     borderRadius: 6,
   },
-  label: {
-    borderRadius: 5,
-  },
 }));
 
 const TaskDetailsFragment = graphql`
@@ -85,14 +78,12 @@ interface TasksDetailsProps {
 }
 
 const TaskDetails: FunctionComponent<TasksDetailsProps> = ({ tasksData }) => {
-  const { t, fldt } = useFormatter();
+  const { t } = useFormatter();
   const classes = useStyles();
   const data: TaskDetails_task$data = useFragment(
     TaskDetailsFragment,
     tasksData,
   );
-  const currentDate = new Date();
-  const isoDate = currentDate.toISOString();
   return (
     <div style={{ height: '100%' }}>
       <Typography variant="h4" gutterBottom={true}>
@@ -110,14 +101,7 @@ const TaskDetails: FunctionComponent<TasksDetailsProps> = ({ tasksData }) => {
             <Typography variant="h3" gutterBottom={true}>
               {t('Due Date')}
             </Typography>
-            <FieldOrEmpty source={data.due_date}>
-              <Chip
-                label={fldt(data.due_date)}
-                variant="outlined"
-                color={data.due_date < isoDate ? 'error' : 'info'}
-                classes={{ root: classes.label }}
-              />
-            </FieldOrEmpty>
+            <ItemDueDate due_date={data.due_date} variant={'inElement'} />
           </Grid>
         </Grid>
       </Paper>

diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/TasksLine.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/TasksLine.tsx
@@ -8,18 +8,14 @@ import Checkbox from '@mui/material/Checkbox';
 import { Link } from 'react-router-dom';
 import Skeleton from '@mui/material/Skeleton';
 import { KeyboardArrowRightOutlined } from '@mui/icons-material';
-import Chip from '@mui/material/Chip';
 import ItemIcon from '../../../../components/ItemIcon';
 import { Theme } from '../../../../components/Theme';
-import {
-  TasksLine_node$data,
-  TasksLine_node$key,
-} from './__generated__/TasksLine_node.graphql';
+import { TasksLine_node$data, TasksLine_node$key } from './__generated__/TasksLine_node.graphql';
 import { useFormatter } from '../../../../components/i18n';
 import { DataColumns } from '../../../../components/list_lines';
 import StixCoreObjectLabels from '../../common/stix_core_objects/StixCoreObjectLabels';
 import ItemStatus from '../../../../components/ItemStatus';
-import FieldOrEmpty from '../../../../components/FieldOrEmpty';
+import ItemDueDate from '../../../../components/ItemDueDate';
 
 const useStyles = makeStyles<Theme>((theme) => ({
   item: {
@@ -42,13 +38,6 @@ const useStyles = makeStyles<Theme>((theme) => ({
     position: 'absolute',
     right: -10,
   },
-  chipInList: {
-    fontSize: 12,
-    height: 20,
-    float: 'left',
-    width: 120,
-    borderRadius: 5,
-  },
 }));
 
 const TaskFragment = graphql`
@@ -107,21 +96,9 @@ export const tasksDataColumns: DataColumns = {
     label: 'Due Date',
     width: '15%',
     isSortable: true,
-    render: (task: TasksLine_node$data, { fld, classes }) => {
-      const isoDate = new Date().toISOString();
-      return (
-        <div>
-        <FieldOrEmpty source={task.due_date}>
-          <Chip
-            label={fld(task.due_date)}
-            variant="outlined"
-            color={task.due_date < isoDate ? 'error' : 'info'}
-            classes={{ root: classes.chipInList }}
-          />
-        </FieldOrEmpty>
-        </div>
-      );
-    },
+    render: (task: TasksLine_node$data) => (
+      <ItemDueDate due_date={task.due_date} variant={'inList'} />
+    ),
   },
   assigneeTo: {
     label: 'Assignees',