From f66380be2470eaed89a2d638bbc33d0740e3754c Mon Sep 17 00:00:00 2001 From: Laurent Bonnet Date: Tue, 10 Sep 2024 17:45:26 +0200 Subject: [PATCH] [frontend] various fix --- .../src/components/dataGrid/DataTable.tsx | 16 ++++--- .../dataGrid/DataTableWithoutFragment.tsx | 2 +- .../components/DataTableComponent.tsx | 7 +-- .../dataGrid/components/DataTableLine.tsx | 47 ++++++++++--------- .../src/components/dataGrid/dataTableTypes.ts | 4 +- .../components/cases/tasks/CaseTasksLines.tsx | 28 ++++++++--- .../components/cases/tasks/TaskPopover.tsx | 10 +++- ...StixCoreRelationshipCreationFromEntity.tsx | 3 +- 8 files changed, 72 insertions(+), 45 deletions(-) diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx index b376c600dc15d..f743ba66a9c10 100644 --- 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 & { lineFragment: GraphQLTaggedNode preloadedPaginationProps: UsePreloadedPaginationFragment, @@ -51,6 +51,7 @@ type OCTIDataTableProps = Pick { 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 }), }} > - + {!hideSearch && ( + + )} {!hideFilters && ( & { 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 index c6607aea0c807..9ba2b22939aed 100644 --- 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(`${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(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 index aadbfb67efb86..9e6faa17468a4 100644 --- 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) => createStyles({ +const useStyles = makeStyles((theme) => createStyles({ cellContainer: ({ cell }) => ({ display: 'flex', width: `calc(var(--col-${cell?.id}-size) * 1px)`, @@ -37,10 +37,10 @@ const useStyles = makeStyles ({ + 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 (
{startsWithSelect && ( @@ -188,7 +189,7 @@ const DataTableLine = ({ />
)} - {effectiveColumns.slice(startsWithSelect ? 1 : 0, actions || disableRedirectOnRowClick ? undefined : -1).map((column) => ( + {effectiveColumns.slice(startsWithSelect ? 1 : 0, actions || selectOnLineClick ? undefined : -1).map((column) => ( {actions && actions(data)} {effectiveColumns.at(-1)?.id === 'navigate' && ( - navigate(link)}> - - + navigate(link)}> + + )} diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts index 36ef559c9b9e2..5063e75b2056c 100644 --- 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> @@ -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 index 216932e06b807..50363c06bcafc 100644 --- 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,6 +17,7 @@ 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'; @@ -24,8 +25,9 @@ import { UsePreloadedPaginationFragment } from '../../../../utils/hooks/usePrelo 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 = ({ } as UsePreloadedPaginationFragment; const dataColumns: DataTableProps['dataColumns'] = { - name: { percentWidth: 35 }, + name: { percentWidth: 30 }, due_date: { label: 'Due Date', percentWidth: 15, @@ -189,10 +191,10 @@ const CaseTasksLines: FunctionComponent = ({ }, objectAssignee: { percentWidth: 20 }, objectLabel: { percentWidth: 20 }, - x_opencti_workflow_id: { percentWidth: 10 }, + x_opencti_workflow_id: { percentWidth: 15 }, }; - const ref = useRef(null); + const ref = useRef(null); return (
= ({
{(queryRef && ref.current) && ( data.tasks?.edges?.map((n) => n?.node)} storageKey={LOCAL_STORAGE_KEY_CASE_TASKS} @@ -236,9 +239,20 @@ const CaseTasksLines: FunctionComponent = ({ 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) => ( + + )} /> )}
@@ -325,7 +339,7 @@ const CaseTasksLines: FunctionComponent = ({ {task && ( setTask(undefined)} header={ { + 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/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx index d6bb7f99a8987..05a295a1da9bb 100644 --- a/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx +++ b/opencti-platform/opencti-front/src/private/components/common/stix_core_relationships/StixCoreRelationshipCreationFromEntity.tsx @@ -819,7 +819,8 @@ const StixCoreRelationshipCreationFromEntity: FunctionComponent