[brackend/frontend] Add support for selecting visible columns and filtering csv export to only visible columns (#11640)

opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx

@@ -49,14 +49,15 @@ const DataTableInternalFilters = ({
 }: DataTableInternalFiltersProps) => {
   const theme = useTheme<Theme>();
   const {
+    columns,
     availableFilterKeys,
     useDataTablePaginationLocalStorage: {
       viewStorage: { searchTerm },
       helpers,
       paginationOptions,
     },
   } = useDataTableContext();
-
+  const extendedExportContext = exportContext ? { ...exportContext, visible_columns: columns.filter(({ id, visible }) => !['select', 'navigate', 'icon'].includes(id) && visible).map((c) => c.id) } : undefined;
   const computedEntityTypes = entityTypes ?? (exportContext?.entity_type ? [exportContext.entity_type] : []);
 
   return (
@@ -88,7 +89,7 @@ const DataTableInternalFilters = ({
               availableEntityTypes={availableEntityTypes}
               availableRelationshipTypes={availableRelationshipTypes}
               availableRelationFilterTypes={availableRelationFilterTypes}
-              exportContext={exportContext}
+              exportContext={extendedExportContext}
               paginationOptions={paginationOptions}
               additionalHeaderButtons={additionalHeaderButtons}
               additionalHeaderToggleButtons={additionalToggleButtons}

opencti-platform/opencti-front/src/components/dataGrid/DataTablePagination.tsx

@@ -25,6 +25,8 @@ const DataTablePagination = ({
   const { t_i18n } = useFormatter();
 
   const {
+    columns,
+    setColumns,
     resetColumns,
     useDataTablePaginationLocalStorage: {
       viewStorage: {
@@ -59,6 +61,35 @@ const DataTablePagination = ({
     }
   }, [page, pageSize]);
 
+  const handleToggleVisibility = (columnId: string) => {
+    const newColumns = [...columns];
+    const currentColumn = newColumns.find(({ id }) => id === columnId);
+    if (!currentColumn) {
+      return;
+    }
+    currentColumn.visible = !currentColumn.visible;
+    setColumns(newColumns);
+  };
+
+  const computeDataColumnOptions = () => {
+    const options = [];
+    if (columns) {
+      for (const column of columns.filter(({ id }) => !['select', 'navigate', 'icon'].includes(id))) {
+        options.push(
+          {
+            value: column.id,
+            label: t_i18n(column.label ?? column.id),
+            selected: column.visible,
+            onClick: () => handleToggleVisibility(column.id),
+            menuLevel: 1,
+          },
+        );
+      }
+    }
+
+    return options;
+  };
+
   const resetTable = () => {
     resetColumns();
     helpers.handleAddProperty('pageSize', '25');
@@ -70,6 +101,14 @@ const DataTablePagination = ({
       onClick: () => resetTable(),
       menuLevel: 0,
     },
+    ...(columns.length > 0
+      ? [
+          {
+            value: 'menu-columns',
+            label: t_i18n('Columns'),
+            menuLevel: 0,
+            nestedOptions: computeDataColumnOptions(),
+          }] : []),
     {
       value: 'menu-rows-per-page',
       label: t_i18n('Rows per page'),

opencti-platform/opencti-front/src/components/dataGrid/components/DataTableComponent.tsx

@@ -151,9 +151,9 @@ const DataTableComponent = ({
         return R.mergeDeepRight(extendedColumnsMap.get(key) as DataTableColumn, {
           ...column,
           // Override column config with what we have in local storage
-          order: useLocalStorage && currentColumn?.index ? currentColumn?.index : index,
-          visible: useLocalStorage && currentColumn?.visible ? currentColumn?.visible : true,
-          percentWidth: useLocalStorage && currentColumn?.percentWidth ? currentColumn?.percentWidth : percentWidth,
+          order: useLocalStorage && currentColumn?.index !== undefined ? currentColumn?.index : index,
+          visible: useLocalStorage && currentColumn?.visible !== undefined ? currentColumn?.visible : true,
+          percentWidth: useLocalStorage && currentColumn?.percentWidth !== undefined ? currentColumn?.percentWidth : percentWidth,
         });
       }),
       // inject "navigate" action (chevron) if navigable and no specific actions defined

opencti-platform/opencti-front/src/components/dataGrid/components/DataTableHeaders.tsx

@@ -174,7 +174,7 @@ const DataTableHeaders: FunctionComponent<DataTableHeadersProps> = ({
           )}
 
           {columns
-            .filter(({ id }) => !['select', 'navigate', 'icon'].includes(id))
+            .filter(({ id, visible }) => !['select', 'navigate', 'icon'].includes(id) && visible)
             .map((column) => (
               <DataTableHeader
                 key={column.id}

opencti-platform/opencti-front/src/components/dataGrid/components/DataTableLine.tsx

@@ -25,7 +25,7 @@ const DataTableLineDummy = () => {
   const { columns, tableWidthState: [tableWidth] } = useDataTableContext();
   return (
     <div style={{ display: 'flex' }}>
-      {columns.map((column) => (
+      {columns.filter((c) => c.visible).map((column) => (
         <div
           key={column.id}
           style={{
@@ -226,7 +226,7 @@ const DataTableLine = ({
           </div>
         )}
 
-        {columns.slice(columnsOffset, (actions || disableNavigation) ? undefined : -1).map((column) => (
+        {columns.filter((c) => c.visible).slice(columnsOffset, (actions || disableNavigation) ? undefined : -1).map((column) => (
           <DataTableCell
             key={column.id}
             cell={column}

opencti-platform/opencti-front/src/schema/relay.schema.graphql

@@ -268,6 +268,7 @@ type AppMemory {
 input ExportContext {
   entity_id: String
   entity_type: String!
+  visible_columns: [String]
 }
 
 type AppDebugDistribution {

opencti-platform/opencti-graphql/config/schema/opencti.graphql

@@ -256,6 +256,7 @@ type AppMemory {
 input ExportContext {
   entity_id: String
   entity_type: String!
+  visible_columns: [String]
 }
 
 type AppDebugDistribution {

opencti-platform/opencti-graphql/src/domain/stix.js

@@ -112,6 +112,7 @@ export const askListExport = async (context, user, exportContext, format, select
   const markingList = await getEntitiesListFromCache(context, user, ENTITY_TYPE_MARKING_DEFINITION);
 
   const { markingFilter, mainFilter } = await getExportFilter(user, { markingList, contentMaxMarkings, objectIdsList: selectedIds });
+  const extendedListParams = { ...listParams, visible_columns: exportContext.visible_columns };
 
   const baseEvent = {
     format, // extension mime type
@@ -147,7 +148,7 @@ export const askListExport = async (context, user, exportContext, format, select
       event: {
         export_scope: 'query', // query or selection or single
         file_name: fileName, // Export expected file name
-        list_params: listParams,
+        list_params: extendedListParams,
         ...baseEvent,
       },
     };

opencti-platform/opencti-graphql/src/generated/graphql.ts

@@ -9000,6 +9000,7 @@ export type ExportAskInput = {
 export type ExportContext = {
   entity_id?: InputMaybe<Scalars['String']['input']>;
   entity_type: Scalars['String']['input'];
+  visible_columns?: InputMaybe<Array<InputMaybe<Scalars['String']['input']>>>;
 };
 
 export type ExtendedContract = {