[frontend] various fix

OpenCTI-Platform · Sep 10, 2024 · f66380b · f66380b
1 parent 043833f
commit f66380b
Show file tree

Hide file tree

Showing 8 changed files with 72 additions and 45 deletions.
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
@@ -38,7 +38,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
 | 'disableLineSelection'
 | 'disableToolBar'
 | 'disableSelectAll'
-| 'disableRedirectOnRowClick'
+| 'selectOnLineClick'
 | 'entityTypes'> & {
   lineFragment: GraphQLTaggedNode
   preloadedPaginationProps: UsePreloadedPaginationFragment<OperationType>,
@@ -51,6 +51,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
   createButton?: ReactNode
   currentView?: string
   hideFilters?: boolean
+  hideSearch?: boolean
   taskScope?: string
 };
 
@@ -77,6 +78,7 @@ const DataTable = (props: OCTIDataTableProps) => {
     variant = DataTableVariant.default,
     additionalHeaderButtons,
     currentView,
+    hideSearch,
     hideFilters,
     taskScope,
   } = props;
@@ -146,11 +148,13 @@ const DataTable = (props: OCTIDataTableProps) => {
               ...(variant === DataTableVariant.default ? { marginTop: -10 } : { marginTop: 10, marginLeft: 10, marginRight: 10 }),
             }}
           >
-            <SearchInput
-              variant={'small'}
-              onSubmit={helpers.handleSearch}
-              keyword={searchTerm}
-            />
+            {!hideSearch && (
+              <SearchInput
+                variant={'small'}
+                onSubmit={helpers.handleSearch}
+                keyword={searchTerm}
+              />
+            )}
             {!hideFilters && (
               <DataTableFilters
                 availableFilterKeys={availableFilterKeys}

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx
@@ -14,7 +14,7 @@ type OCTIDataTableProps = Pick<DataTableProps, 'dataColumns'
 | 'disableLineSelection'
 | 'disableToolBar'
 | 'disableSelectAll'
-| 'disableRedirectOnRowClick'
+| 'selectOnLineClick'
 | 'filtersComponent'
 | 'variant'> & {
   data: unknown,

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx
@@ -42,7 +42,7 @@ const DataTableComponent = ({
   disableLineSelection,
   disableToolBar,
   disableSelectAll,
-  disableRedirectOnRowClick,
+  selectOnLineClick,
   onLineClick,
 }: DataTableProps) => {
   const localStorageColumns = useDataTableLocalStorage<LocalStorageColumns>(`${storageKey}_columns`, {}, true)[0];
@@ -59,7 +59,8 @@ const DataTableComponent = ({
         ...(currentColumn?.size ? { size: currentColumn?.size } : {}),
       });
     }),
-    ...(actions || disableRedirectOnRowClick ? [] : [{ id: 'navigate', visible: true } as DataTableColumn]),
+    // inject "navigate" action (chevron) if requested
+    ...(disableNavigation ? [] : [{ id: 'navigate', visible: true } as DataTableColumn]),
   ];
 
   const [columns, setColumns] = useState<DataTableColumns>(columnsInitialState);
@@ -123,7 +124,7 @@ const DataTableComponent = ({
         disableNavigation,
         disableToolBar,
         disableSelectAll,
-        disableRedirectOnRowClick,
+        selectOnLineClick,
         onLineClick,
         page,
         setPage,

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx
@@ -14,7 +14,7 @@ import { getMainRepresentative } from '../../../utils/defaultRepresentatives';
 
 // Deprecated - https://mui.com/system/styles/basics/
 // Do not use it for new code.
-const useStyles = makeStyles<Theme, { cell?: DataTableColumn, navigable?: boolean }>((theme) => createStyles({
+const useStyles = makeStyles<Theme, { cell?: DataTableColumn, clickable?: boolean }>((theme) => createStyles({
   cellContainer: ({ cell }) => ({
     display: 'flex',
     width: `calc(var(--col-${cell?.id}-size) * 1px)`,
@@ -37,10 +37,10 @@ const useStyles = makeStyles<Theme, { cell?: DataTableColumn, navigable?: boolea
     display: 'flex',
     gap: 8,
   },
-  row: ({ navigable }) => ({
+  row: ({ clickable }) => ({
     display: 'flex',
     borderBottom: `1px solid ${theme.palette.divider}`,
-    '&:hover': navigable ? {
+    '&:hover': clickable ? {
       backgroundColor:
         theme.palette.mode === 'dark'
           ? 'rgba(255, 255, 255, .1)'
@@ -113,7 +113,7 @@ const DataTableLine = ({
     actions,
     disableNavigation,
     onLineClick,
-    disableRedirectOnRowClick,
+    selectOnLineClick,
     variant,
   } = useDataTableContext();
   const data = useLineData(row);
@@ -123,15 +123,10 @@ const DataTableLine = ({
     link = `${link}/${redirectionMode}`;
   }
 
-  const navigable = !disableNavigation && !onLineClick;
-  const internalOnClick = () => {
-    if (onLineClick) {
-      onLineClick(data);
-    } else if (navigable) {
-      navigate(link);
-    }
-  };
-  const classes = useStyles({ navigable });
+  const navigable = !disableNavigation && !onLineClick && !selectOnLineClick;
+  const clickable = navigable || selectOnLineClick || onLineClick;
+
+  const classes = useStyles({ clickable });
 
   const {
     selectAll,
@@ -153,20 +148,26 @@ const DataTableLine = ({
   };
 
   const handleRowClick = (event: React.MouseEvent) => {
-    if (disableRedirectOnRowClick) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (selectOnLineClick) {
       handleSelectLine(event);
-      return undefined;
     }
-    if (variant !== DataTableVariant.widget) internalOnClick();
-    return undefined;
+    if (onLineClick) {
+      onLineClick(data);
+    } else if (navigable) {
+      navigate(link);
+    }
   };
 
   return (
     <div
       key={row.id}
       className={classes.row}
-      onClick={handleRowClick}
-      style={{ cursor: (navigable || Boolean(onLineClick)) ? 'pointer' : 'unset' }}
+      // using onMouseDown to redirect before drag and drop happens when used in dashboard widgets
+      onMouseDown={variant === DataTableVariant.widget ? handleRowClick : undefined}
+      onClick={variant !== DataTableVariant.widget ? handleRowClick : undefined}
+      style={{ cursor: clickable ? 'pointer' : 'unset' }}
       data-testid={getMainRepresentative(data)}
     >
       {startsWithSelect && (
@@ -188,7 +189,7 @@ const DataTableLine = ({
           />
         </div>
       )}
-      {effectiveColumns.slice(startsWithSelect ? 1 : 0, actions || disableRedirectOnRowClick ? undefined : -1).map((column) => (
+      {effectiveColumns.slice(startsWithSelect ? 1 : 0, actions || selectOnLineClick ? undefined : -1).map((column) => (
         <DataTableCell
           key={column.id}
           cell={column}
@@ -213,9 +214,9 @@ const DataTableLine = ({
       >
         {actions && actions(data)}
         {effectiveColumns.at(-1)?.id === 'navigate' && (
-        <IconButton onClick={() => navigate(link)}>
-          <KeyboardArrowRightOutlined />
-        </IconButton>
+          <IconButton onClick={() => navigate(link)}>
+            <KeyboardArrowRightOutlined />
+          </IconButton>
         )}
       </div>
 

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
@@ -85,7 +85,7 @@ export interface DataTableContextProps {
   disableNavigation: DataTableProps['disableNavigation']
   disableToolBar: DataTableProps['disableToolBar']
   disableSelectAll: DataTableProps['disableSelectAll']
-  disableRedirectOnRowClick: DataTableProps['disableRedirectOnRowClick']
+  selectOnLineClick: DataTableProps['selectOnLineClick']
   onLineClick: DataTableProps['onLineClick']
   page: number
   setPage:Dispatch<SetStateAction<number>>
@@ -130,7 +130,7 @@ export interface DataTableProps {
   disableLineSelection?: boolean
   disableToolBar?: boolean
   disableSelectAll?: boolean
-  disableRedirectOnRowClick?: boolean
+  selectOnLineClick?: boolean
   onLineClick?: (line: any) => void
 }
 

diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/CaseTasksLines.tsx
@@ -17,15 +17,17 @@ import { CaseTasksLines_data$data } from '@components/cases/tasks/__generated__/
 import CaseTaskOverview from '@components/cases/tasks/CaseTaskOverview';
 import { Link } from 'react-router-dom';
 import { CaseTaskOverview_task$key } from '@components/cases/tasks/__generated__/CaseTaskOverview_task.graphql';
+import { CaseTasksLine_data$data } from '@components/cases/tasks/__generated__/CaseTasksLine_data.graphql';
 import { useFormatter } from '../../../../components/i18n';
 import type { Theme } from '../../../../components/Theme';
 import { handleErrorInForm } from '../../../../relay/environment';
 import { UsePreloadedPaginationFragment } from '../../../../utils/hooks/usePreloadedPaginationFragment';
 import CaseTemplateField from '../../common/form/CaseTemplateField';
 import { Option } from '../../common/form/ReferenceField';
 import CaseTaskCreation from './CaseTaskCreation';
+import TaskPopover from './TaskPopover';
 import { caseSetTemplateQuery, CaseTaskFragment, generateConnectionId } from '../CaseUtils';
-import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from './__generated__/CaseTasksLinesQuery.graphql';
+import { CaseTasksLinesQuery, CaseTasksLinesQuery$data, CaseTasksLinesQuery$variables } from './__generated__/CaseTasksLinesQuery.graphql';
 import DataTable from '../../../../components/dataGrid/DataTable';
 import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
@@ -178,7 +180,7 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
   } as UsePreloadedPaginationFragment<CaseTasksLinesQuery>;
 
   const dataColumns: DataTableProps['dataColumns'] = {
-    name: { percentWidth: 35 },
+    name: { percentWidth: 30 },
     due_date: {
       label: 'Due Date',
       percentWidth: 15,
@@ -189,10 +191,10 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
     },
     objectAssignee: { percentWidth: 20 },
     objectLabel: { percentWidth: 20 },
-    x_opencti_workflow_id: { percentWidth: 10 },
+    x_opencti_workflow_id: { percentWidth: 15 },
   };
 
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
   return (
     <div style={{ height: '100%' }}>
       <Typography
@@ -229,16 +231,28 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
         <div style={{ height: 400 }} ref={ref}>
           {(queryRef && ref.current) && (
             <DataTable
+              variant={DataTableVariant.inline}
               dataColumns={dataColumns}
               resolvePath={(data: CaseTasksLines_data$data) => data.tasks?.edges?.map((n) => n?.node)}
               storageKey={LOCAL_STORAGE_KEY_CASE_TASKS}
               initialValues={initialValues}
               toolbarFilters={contextTaskFilters}
               preloadedPaginationProps={preloadedPaginationProps}
               lineFragment={CaseTaskFragment}
-              variant={DataTableVariant.inline}
               rootRef={ref.current}
-              onLineClick={(line: CaseTaskOverview_task$key & { name: string, id: string }) => setTask(line)}
+              disableNavigation
+              hideFilters
+              onLineClick={(line: CaseTaskOverview_task$key & { name: string, id: string }) => {
+                setTask(line);
+              }}
+              actions={(row: CaseTasksLine_data$data) => (
+                <TaskPopover
+                  id={row.id}
+                  objectId={caseId}
+                  paginationOptions={queryTaskPaginationOptions}
+                  variant="inLine"
+                />
+              )}
             />
           )}
         </div>
@@ -325,7 +339,7 @@ const CaseTasksLines: FunctionComponent<CaseTasksLinesProps> = ({
       {task && (
         <Drawer
           open={!!task}
-          title={task?.name}
+          title={task?.name ?? ''}
           onClose={() => setTask(undefined)}
           header={
             <IconButton

diff --git a/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx b/opencti-platform/opencti-front/src/private/components/cases/tasks/TaskPopover.tsx
@@ -62,16 +62,22 @@ const TaskPopover = ({
     { id },
   );
   const handleOpen = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const handleOpenEdit = () => {
+  const handleOpenEdit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     setDisplayEdit(true);
     handleClose();
   };
-  const handleCloseEdit = () => {
+  const handleCloseEdit = (event: React.SyntheticEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
     setDisplayEdit(false);
   };
   const {

diff --git a/...vate/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx b/...vate/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx
@@ -819,7 +819,8 @@ const StixCoreRelationshipCreationFromEntity: FunctionComponent<StixCoreRelation
                     <DataTable
                       disableToolBar
                       disableSelectAll
-                      disableRedirectOnRowClick
+                      disableNavigation
+                      selectOnLineClick
                       rootRef={tableRootRef ?? undefined}
                       variant={DataTableVariant.inline}
                       dataColumns={buildColumns(platformModuleHelpers)}