Remove dataTransform from DataDisplay

oxlint-baseline.json

@@ -535,9 +535,9 @@
       "code": "react(refs)",
       "message": "Cannot access refs during render",
       "location": {
-        "line": 112,
+        "line": 115,
         "column": 17,
-        "offset": 3135
+        "offset": 3186
       },
       "sourceLine": "{children({show, hide, targetRef: setTarget})}",
       "fingerprint": "src/web/components/chart/base/ToolTip.tsx|react(refs)|Cannot access refs during render|17|{children({show, hide, targetRef: setTarget})}"
@@ -547,9 +547,9 @@
       "code": "typescript(no-useless-default-assignment)",
       "message": "Default value is useless because the property has type `ToString` (not nullish). This default assignment will never be used.",
       "location": {
-        "line": 44,
+        "line": 46,
         "column": 18,
-        "offset": 1059
+        "offset": 1101
       },
       "sourceLine": "const {color = Theme.lightGray, toolTip} = data;",
       "fingerprint": "src/web/components/chart/donut/Arc2d.tsx|typescript(no-useless-default-assignment)|Default value is useless because the property has type `ToString` (not nullish). This default assignment will never be used.|18|const {color = Theme.lightGray, toolTip} = data;"
@@ -686,18 +686,6 @@
       "sourceLine": "if (permittedDisplaysSignatureRef.current !== permittedDisplaysSignature) {",
       "fingerprint": "src/web/components/dashboard/DashboardView.tsx|react(refs)|Cannot access refs during render|7|if (permittedDisplaysSignatureRef.current !== permittedDisplaysSignature) {"
     },
-    {
-      "filename": "src/web/components/dashboard/display/Loader.tsx",
-      "code": "typescript(unbound-method)",
-      "message": "Avoid referencing unbound methods which may cause unintentional scoping of `this`.",
-      "location": {
-        "line": 147,
-        "column": 60,
-        "offset": 3934
-      },
-      "sourceLine": "this.subscriptions.push(subscribe(subscription, this.load));",
-      "fingerprint": "src/web/components/dashboard/display/Loader.tsx|typescript(unbound-method)|Avoid referencing unbound methods which may cause unintentional scoping of `this`.|60|this.subscriptions.push(subscribe(subscription, this.load));"
-    },
     {
       "filename": "src/web/components/date/__tests__/DateTime.test.tsx",
       "code": "typescript(unbound-method)",
@@ -3662,18 +3650,6 @@
       "sourceLine": "...user,",
       "fingerprint": "src/web/pages/users/UsersDialog.tsx|typescript(no-misused-spread)|Using the spread operator on class instances will lose their class prototype.|5|...user,"
     },
-    {
-      "filename": "src/web/pages/vulnerabilities/dashboard/VulnerabilitiesHostsDisplay.tsx",
-      "code": "typescript(no-useless-default-assignment)",
-      "message": "Default value is useless because the property has type `HostsFilterValue` (not nullish). This default assignment will never be used.",
-      "location": {
-        "line": 67,
-        "column": 28,
-        "offset": 2375
-      },
-      "sourceLine": "const {filterValue = {start: undefined, end: undefined}} = clickData;",
-      "fingerprint": "src/web/pages/vulnerabilities/dashboard/VulnerabilitiesHostsDisplay.tsx|typescript(no-useless-default-assignment)|Default value is useless because the property has type `HostsFilterValue` (not nullish). This default assignment will never be used.|28|const {filterValue = {start: undefined, end: undefined}} = clickData;"
-    },
     {
       "filename": "src/web/pages/vulnerabilities/VulnerabilitiesListPage.tsx",
       "code": "typescript(no-useless-default-assignment)",

src/web/components/dashboard/display/DataDisplay.tsx

@@ -22,9 +22,6 @@ import DisplayContainer, {
   DISPLAY_HEADER_HEIGHT,
   DISPLAY_BORDER_WIDTH,
 } from 'web/components/dashboard/display/DisplayContainer';
-import useDataTransform, {
-  type TransformFunc,
-} from 'web/components/dashboard/display/useDataTransform';
 import IconDivider from 'web/components/layout/IconDivider';
 import Layout from 'web/components/layout/Layout';
 import useTranslation from 'web/hooks/useTranslation';
@@ -69,15 +66,12 @@ type DataDisplayChildren<
 
 export type DataDisplayProps<
   TData extends object,
-  TTransformedData extends object,
-  TTransformProps extends object = object,
   TState extends DisplayState = DisplayState,
-  TChildren = DataDisplayChildren<TTransformedData, TState>,
+  TChildren = DataDisplayChildren<TData, TState>,
 > = Omit<DisplayProps<TState>, 'children' | 'title'> & {
-  data?: TData;
-  dataRow?: DataRowFunc<TTransformedData>;
+  data: TData | undefined;
+  dataRow?: DataRowFunc<TData>;
   dataTitles?: DataTitles;
-  dataTransform: TransformFunc<TData, TTransformedData, TTransformProps>;
   filter?: FilterType;
   icons?: IconsRenderFunc<TState>;
   children?: TChildren;
@@ -87,8 +81,8 @@ export type DataDisplayProps<
   showFilterString?: boolean;
   showSvgDownload?: boolean;
   showToggleLegend?: boolean;
-  title: ToString | TitleFunc<TTransformedData>;
-} & TTransformProps;
+  title: ToString | TitleFunc<TData>;
+};
 
 const log = logger.getLogger('web.components.dashboard.display.DataDisplay');
 
@@ -168,21 +162,13 @@ const createSvgUrl = (
 
 const DataDisplay = <
   TData extends object,
-  TProps extends DataDisplayProps<
-    TData,
-    TTransformedData,
-    TTransformProps,
-    TState
-  >,
-  TTransformedData extends object,
-  TTransformProps extends object = object,
+  TProps extends DataDisplayProps<TData, TState>,
   TState extends DisplayState = DisplayState,
 >({
   children,
   data,
   dataRow,
   dataTitles,
-  dataTransform,
   dragHandleRef,
   filter,
   height,
@@ -206,10 +192,8 @@ const DataDisplay = <
   const downloadSvgUrlRef = useRef<string | undefined>(undefined);
   const downloadCsvUrlRef = useRef<string | undefined>(undefined);
 
-  const originalData = data;
-  const transformedData = useDataTransform(originalData, dataTransform);
   const title = isFunction(titleFunc)
-    ? titleFunc({data: transformedData, isLoading})
+    ? titleFunc({data, isLoading})
     : String(titleFunc);
 
   const getCurrentState = (newState: TState | undefined = state): TState => {
@@ -274,7 +258,7 @@ const DataDisplay = <
       return;
     }
 
-    const rowData = dataRow(transformedData);
+    const rowData = dataRow(data);
     const csvData = [
       escapeCsv(title),
       dataTitles.map(t => escapeCsv(String(t))).join(','),
@@ -301,8 +285,6 @@ const DataDisplay = <
   height = height - DISPLAY_HEADER_HEIGHT;
   width = width - DISPLAY_BORDER_WIDTH;
 
-  isLoading = isLoading && !isDefined(originalData);
-
   const showCsvDownload = isDefined(dataRow) && isDefined(dataTitles);
 
   showFilterString = showFilterString && isDefined(filter);
@@ -328,7 +310,7 @@ const DataDisplay = <
                   {isFunction(children)
                     ? // oxlint-disable-next-line react/refs
                       children({
-                        data: transformedData,
+                        data,
                         width,
                         height,
                         svgRef,

src/web/components/dashboard/display/DataTableDisplay.tsx

@@ -12,63 +12,34 @@ import DataTable, {
   type DataTableProps,
 } from 'web/components/dashboard/display/DataTable';
 
-type DataTableDisplayRenderProps<TTransformedData extends object> =
-  DataTableProps<TTransformedData> & {
-    data?: TTransformedData;
+type DataTableDisplayRenderProps<TData extends object> =
+  DataTableProps<TData> & {
+    data?: TData;
   };
 
-type DataTableDisplayChildren<TTransformedData extends object> = (
-  props: DataTableDisplayRenderProps<TTransformedData>,
+type DataTableDisplayChildren<TData extends object> = (
+  props: DataTableDisplayRenderProps<TData>,
 ) => React.ReactNode;
 
 export type DataTableDisplayProps<
   TData extends object,
-  TTransformedData extends object,
-  TTransformProps extends object = object,
   TState extends DisplayState = DisplayState,
-> = DataDisplayProps<
-  TData,
-  TTransformedData,
-  TTransformProps,
-  TState,
-  DataTableDisplayChildren<TTransformedData>
->;
+> = DataDisplayProps<TData, TState, DataTableDisplayChildren<TData>>;
 
 type DataTableDisplayComponentProps<
   TData extends object,
-  TTransformedData extends object,
-  TTransformProps extends object,
   TState extends DisplayState,
-> = DataTableDisplayProps<TData, TTransformedData, TTransformProps, TState> &
-  TTransformProps;
+> = DataTableDisplayProps<TData, TState>;
 
 const DataTableDisplay = <
   TData extends object,
-  TTransformedData extends object,
-  TTransformProps extends object = object,
   TState extends DisplayState = DisplayState,
 >(
-  props: DataTableDisplayComponentProps<
-    TData,
-    TTransformedData,
-    TTransformProps,
-    TState
-  >,
+  props: DataTableDisplayComponentProps<TData, TState>,
 ) => {
   const {children, dataRow, dataTitles} = props;
   return (
-    <DataDisplay<
-      TData,
-      DataTableDisplayComponentProps<
-        TData,
-        TTransformedData,
-        TTransformProps,
-        TState
-      >,
-      TTransformedData,
-      TTransformProps,
-      TState
-    >
+    <DataDisplay<TData, DataTableDisplayComponentProps<TData, TState>, TState>
       {...props}
       showSvgDownload={false}
       showToggleLegend={false}

src/web/components/dashboard/display/Loader.tsx

@@ -22,6 +22,7 @@ import withSubscription from 'web/utils/withSubscription';
 export interface LoaderRenderProps<TData> {
   data?: TData;
   isLoading: boolean;
+  isFetching: boolean;
 }
 
 export interface DisplayLoaderProps<TData> {
@@ -144,6 +145,7 @@ export class Loader<TData> extends React.Component<
     }
 
     for (const subscription of subscriptions) {
+      // oxlint-disable-next-line typescript/unbound-method
       this.subscriptions.push(subscribe(subscription, this.load));
     }
   }
@@ -167,7 +169,13 @@ export class Loader<TData> extends React.Component<
   render() {
     const {children, isLoading} = this.props;
     const {data} = this.state;
-    return isDefined(children) ? children({data, isLoading}) : null;
+    return isDefined(children)
+      ? children({
+          data,
+          isLoading: !isDefined(data) && isLoading,
+          isFetching: isLoading,
+        })
+      : null;
   }
 }