10423

Committed 11 Nov 2025 04:53PM UTC coverage: 74.435% (-0.1%) from 74.562%

Build # 10423

Build Type

push

gitlab-ci

Committed by

web-flow

Commit Message

Merge pull request #1071 from mendersoftware/dependabot/npm_and_yarn/frontend/main/development-dependencies-92732187be

Run Details

3868 of 5393 branches covered (71.72%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 2 files covered. (100.0%)

176 existing lines in 95 files now uncovered.

64605 of 86597 relevant lines covered (74.6%)

7.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

93.89

/frontend/src/js/common-ui/List.tsx

// Copyright 2024 Northern.tech AS
//
//    Licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//        http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
import { CSSProperties, ComponentType, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState } from 'react';

import { Settings as SettingsIcon, Sort as SortIcon } from '@mui/icons-material';
import { Checkbox } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { DEVICE_LIST_DEFAULTS, IdAttribute, SORTING_OPTIONS, TIMEOUTS } from '@northern.tech/store/constants';
import { SortOptions } from '@northern.tech/store/organizationSlice/types';
import { isDarkMode } from '@northern.tech/store/utils';
import { toggle } from '@northern.tech/utils/helpers';
import { useWindowSize } from '@northern.tech/utils/resizehook';

import Loader from './Loader';
import Pagination from './Pagination';
import MenderTooltip from './helptips/MenderTooltip';

const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;

interface Attribute {
  name: string;
  scope: string;
}
export interface RendererProp<T> {
  [key: string]: any;
  column: ColumnHeader<T>;
  item?: T;
}

export interface ClassesOverrides {
  classes: Record<string, string>;
}
export interface ColumnHeader<T> {
  attribute: Attribute;
  classes?: ClassesOverrides;
  component: ComponentType<RendererProp<T> & ClassesOverrides>;
  customize?: () => void;
  sortable: boolean;
  style?: CSSProperties;
  textRender?: (props: RendererProp<T>) => string | ReactElement;
  title: string;
}

interface ListState {
  page?: number;
  perPage?: number;
  selection?: number[];
  sort?: SortOptions;
  // selectedAttributes: unknown[];
  // selectedIssues: unknown[];
  // state: string;
  total: number;
  // setOnly: boolean;
  // refreshTrigger: boolean;
  // detailsTab: string;
  // isLoading: boolean;
}

type wID = { id: string };

interface CommonListProps<T extends wID> {
  columnHeaders: ColumnHeader<T>[];
  customColumnSizes?: Attribute[];
  idAttribute?: IdAttribute;
  ListItemComponent: ComponentType<ListItemComponentProps<T>>;
  listItems: T[];
  listState: ListState;
  onChangeRowsPerPage: (perPage: number) => void;
  onExpandClick: (item: T) => void;
  onPageChange: (event: MouseEvent | null, page: number) => void;
  onResizeColumns: ((columns: { attribute: Attribute; size: number }) => void) | false;
  onSelect: ((rows: number[]) => void) | false;
  onSort?: (attr: Attribute | object) => void;
  pageLoading: boolean;
  PaginationProps?: object;
  sortingNotes?: { [key: string]: string };
}
export interface ListItemComponentProps<T> {
  columnHeaders: ColumnHeader<T>[];
  idAttribute?: IdAttribute;
  index: number;
  key: string;
  listItem: T;
  listState: ListState;
  onClick: (item: T) => void;
  onRowSelect: (selectedRow: T) => void;
  selectable: boolean;
  selected: boolean;
}

const useStyles = makeStyles()(theme => ({
  header: {
    // @ts-ignore
    color: theme.palette.text.hint
  },
  resizer: {
    cursor: 'col-resize',
    paddingLeft: 5,
    paddingRight: 5
  },
  resizeHandle: {
    width: 4,
    background: 'initial',
    ['&.hovering']: {
      background: theme.palette.grey[600]
    },
    ['&.resizing']: {
      background: isDarkMode(theme.palette.mode) ? theme.palette.grey[200] : theme.palette.grey[900]
    }
  }
}));

export const minCellWidth = 150;

export const calculateResizeChange = ({ columnElements, columnHeaders, e, index, prev, selectable }) => {
  const isShrinkage = prev > e.clientX ? -1 : 1;
  const columnDelta = Math.abs(e.clientX - prev) * isShrinkage;
  const relevantColumns = getRelevantColumns(columnElements, selectable);
  const canModifyNextColumn = index + 1 < columnHeaders.length - 1;

  return relevantColumns.reduce((accu, element, columnIndex) => {
    const currentWidth = element.offsetWidth;
    const column = { attribute: columnHeaders[columnIndex + 1].attribute, size: currentWidth };
    if (canModifyNextColumn && index === columnIndex) {
      column.size = currentWidth + columnDelta;
    } else if (canModifyNextColumn && index + 1 === columnIndex) {
      column.size = currentWidth - columnDelta;
    }
    accu.push(column);
    return accu;
  }, []);
};
const getRelevantColumns = (columnElements, selectable) => [...columnElements].slice(selectable ? 1 : 0, columnElements.length - 1);
const getTemplateColumns = (columns, selectable) =>
  selectable ? `52px ${columns} minmax(${minCellWidth}px, 1fr)` : `${columns} minmax(${minCellWidth}px, 1fr)`;

const getColumnsStyle = (columns, defaultSize, selectable) => {
  const template = columns.map(({ size }) => `minmax(${minCellWidth}px, ${size ? `${size}px` : defaultSize})`);
  // applying styles via state changes would lead to less smooth changes, so we set the style directly on the components
  return getTemplateColumns(template.join(' '), selectable);
};
export const CommonList = <T extends wID>(props: CommonListProps<T>) => {
  const {
    columnHeaders,
    customColumnSizes = [],
    listItems,
    listState,
    idAttribute,
    onChangeRowsPerPage,
    PaginationProps = {},
    onExpandClick,
    onResizeColumns,
    onPageChange,
    onSelect,
    onSort = () => {},
    pageLoading,
    sortingNotes,
    ListItemComponent
  } = props;
  const { page: pageNo = defaultPage, perPage: pageLength = defaultPerPage, selection: selectedRows = [], sort = {}, total: pageTotal = 1 } = listState;
  const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;
  const listRef = useRef<HTMLDivElement | null>(null);
  const selectedRowsRef = useRef(selectedRows);
  const initRef = useRef<number | null>(null);
  const [resizeTrigger, setResizeTrigger] = useState(false);

  const size = useWindowSize();
  const selectable = !!onSelect;
  const { classes } = useStyles();

  useEffect(() => {
    selectedRowsRef.current = selectedRows;
  }, [selectedRows]);

  useEffect(() => {
    if (!listRef.current) {
      return;
    }
    const relevantColumns = getRelevantColumns(listRef.current?.querySelector('.deviceListRow')?.children, selectable);
    listRef.current.style.gridTemplateColumns = getColumnsStyle(
      customColumnSizes.length && customColumnSizes.length === relevantColumns.length ? customColumnSizes : relevantColumns,
      '1.5fr',
      selectable
    );
  }, [customColumnSizes, columnHeaders, selectable, resizeTrigger, size.width]);

  useEffect(() => {
    clearTimeout(initRef.current || undefined);
    initRef.current = setTimeout(() => setResizeTrigger(toggle), TIMEOUTS.debounceDefault) as unknown as number;
    return () => {
      clearTimeout(initRef?.current || undefined);
    };
  }, [customColumnSizes.length]);

  const onRowSelection = selectedRow => {
    const updatedSelection = [...selectedRowsRef.current];
    const selectedIndex = updatedSelection.indexOf(selectedRow);
    if (selectedIndex === -1) {
      updatedSelection.push(selectedRow);
    } else {
      updatedSelection.splice(selectedIndex, 1);
    }
    if (onSelect) {
      onSelect(updatedSelection);
    }
  };

  const onSelectAllClick = () => {
    let newSelectedRows: number[] = Array.from({ length: listItems.length }, (_, i) => i);
    if (selectedRows.length && selectedRows.length <= listItems.length) {
      newSelectedRows = [];
    }
    if (onSelect) {
      onSelect(newSelectedRows);
    }
  };

  const handleResizeChange = useCallback(
    (e, { index, prev, ref }) => {
      const changedColumns = calculateResizeChange({
        columnElements: [...ref.current.parentElement.children],
        columnHeaders,
        e,
        index,
        prev,
        selectable
      });
      // applying styles via state changes would lead to less smooth changes, so we set the style directly on the components
      if (listRef.current) listRef.current.style.gridTemplateColumns = getColumnsStyle(changedColumns, undefined, selectable);
    },
    [columnHeaders, selectable]
  );

  const handleResizeFinish = useCallback(
    (e, { index, prev, ref }) => {
      const changedColumns = calculateResizeChange({
        columnElements: ref.current.parentElement.children,
        columnHeaders,
        e,
        index,
        prev,
        selectable
      });
      if (onResizeColumns) {
        onResizeColumns(changedColumns);
      }
    },
    [columnHeaders, onResizeColumns, selectable]
  );

  const numSelected = (selectedRows || []).length;
  return (
    <div className={`deviceList ${selectable ? 'selectable' : ''}`} ref={listRef}>
      <div className={`header ${classes.header}`}>
        <div className="deviceListRow">
          {selectable && (
            <div>
              <Checkbox
                indeterminate={numSelected > 0 && numSelected < listItems.length}
                checked={numSelected === listItems.length}
                onChange={onSelectAllClick}
              />
            </div>
          )}
          {columnHeaders.map((item, index) => (
            <HeaderItem
              column={item}
              columnCount={columnHeaders.length}
              index={index}
              key={`columnHeader-${index}`}
              onSort={onSort}
              resizable={!!onResizeColumns}
              sortCol={sortCol}
              sortDown={sortDown}
              onResizeChange={handleResizeChange}
              onResizeFinish={handleResizeFinish}
              sortingNotes={sortingNotes}
            />
          ))}
        </div>
      </div>
      <div className="body">
        {listItems.map((item, index) => (
          <ListItemComponent
            columnHeaders={columnHeaders}
            listItem={item}
            listState={listState}
            idAttribute={idAttribute}
            index={index}
            key={item.id}
            onClick={onExpandClick}
            onRowSelect={onRowSelection}
            selectable={selectable}
            selected={selectedRows.indexOf(index) !== -1}
          />
        ))}
      </div>
      <div className="footer flexbox margin-top">
        <Pagination
          className="margin-top-none"
          count={pageTotal}
          rowsPerPage={pageLength}
          onChangeRowsPerPage={onChangeRowsPerPage}
          page={pageNo}
          onChangePage={onPageChange}
          {...PaginationProps}
        />
        <Loader show={pageLoading} small />
      </div>
    </div>
  );
};

interface HeaderItemProps<T> {
  column: ColumnHeader<T>;
  columnCount: number;
  index: number;
  onResizeChange: (
    e: MouseEvent,
    eventData: {
      index: number;
      prev: number;
      ref: MutableRefObject<HTMLDivElement | null>;
    }
  ) => void;
  onResizeFinish: (
    e: MouseEvent,
    eventData: {
      index: number;
      prev: number;
      ref: MutableRefObject<HTMLDivElement | null>;
    }
  ) => void;
  onSort: (attr: Attribute | object) => void;
  resizable: boolean;
  sortCol?: string;
  sortDown?: string;
  sortingNotes?: { [key: string]: string };
}

const HeaderItem = <T extends wID>(props: HeaderItemProps<T>) => {
  const { sortingNotes, column, columnCount, index, sortCol, sortDown = undefined, onSort, onResizeChange, onResizeFinish, resizable } = props;
  const [isHovering, setIsHovering] = useState(false);
  const [shouldRemoveListeners, setShouldRemoveListeners] = useState(false);
  const resizeRef = useRef<null | number>(null);
  const ref = useRef<HTMLDivElement | null>(null);
  const { classes } = useStyles();

  const onMouseOut = () => setIsHovering(false);

  const onMouseOver = () => setIsHovering(true);

  const mouseMove = useCallback(
    (e: MouseEvent) => {
      if (resizable && resizeRef.current) {
        onResizeChange(e, { index, prev: resizeRef.current, ref });
        resizeRef.current = e.clientX;
      }
    },
    [index, onResizeChange, resizable]
  );

  const mouseUp = useCallback(
    (e: MouseEvent) => {
      if (resizeRef.current) {
        onResizeFinish(e, { index, prev: resizeRef.current, ref });
        resizeRef.current = null;
        setShouldRemoveListeners(true);
      }
    },
    [index, onResizeFinish]
  );

  const mouseDown = e => (resizeRef.current = e.clientX);

  useEffect(() => {
    window.addEventListener('mousemove', mouseMove);
    window.addEventListener('mouseup', mouseUp);
    return () => {
      setShouldRemoveListeners(!!resizeRef.current);
    };
  }, [mouseMove, mouseUp]);

  useEffect(() => {
    if (shouldRemoveListeners) {
      window.removeEventListener('mousemove', mouseMove);
      window.removeEventListener('mouseup', mouseUp);
      setShouldRemoveListeners(false);
    }
  }, [shouldRemoveListeners, mouseMove, mouseUp]);

  let resizeHandleClassName = resizable && isHovering ? 'hovering' : '';
  resizeHandleClassName = resizeRef.current ? 'resizing' : resizeHandleClassName;
  const header = (
    <div className="columnHeader flexbox space-between relative" style={column.style} onMouseEnter={onMouseOver} onMouseLeave={onMouseOut} ref={ref}>
      <div className="flexbox center-aligned" onClick={() => onSort(column.attribute ? column.attribute : {})}>
        {column.title}
        {column.sortable && (
          <SortIcon
            className={`sortIcon ${sortCol === column.attribute.name ? 'selected' : ''} ${(sortDown === SORTING_OPTIONS.desc).toString()}`}
            style={{ fontSize: 16 }}
          />
        )}
      </div>
      <div className="flexbox center-aligned full-height">
        {column.customize && <SettingsIcon onClick={column.customize} style={{ fontSize: 16 }} />}
        {index < columnCount - 2 && resizable && (
          <div onMouseDown={mouseDown} className={`${classes.resizer} full-height`}>
            <div className={`full-height ${classes.resizeHandle} ${resizeHandleClassName}`} />
          </div>
        )}
      </div>
    </div>
  );
  return column.sortable && sortingNotes && sortingNotes[column.attribute.name] ? (
    <MenderTooltip title={sortingNotes[column.attribute.name]} placement="top-start">
      {header}
    </MenderTooltip>
  ) : (
    header
  );
};

1	// Copyright 2024 Northern.tech AS	2✔
2	//	2✔
3	// Licensed under the Apache License, Version 2.0 (the "License");	2✔
4	// you may not use this file except in compliance with the License.	2✔
5	// You may obtain a copy of the License at	2✔
6	//	2✔
7	// http://www.apache.org/licenses/LICENSE-2.0	2✔
8	//	2✔
9	// Unless required by applicable law or agreed to in writing, software	2✔
10	// distributed under the License is distributed on an "AS IS" BASIS,	2✔
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.	2✔
12	// See the License for the specific language governing permissions and	2✔
13	// limitations under the License.	2✔
14	import { CSSProperties, ComponentType, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState } from 'react';	2✔
15		2✔
16	import { Settings as SettingsIcon, Sort as SortIcon } from '@mui/icons-material';	2✔
17	import { Checkbox } from '@mui/material';	2✔
18	import { makeStyles } from 'tss-react/mui';	2✔
19		2✔
20	import { DEVICE_LIST_DEFAULTS, IdAttribute, SORTING_OPTIONS, TIMEOUTS } from '@northern.tech/store/constants';	2✔
21	import { SortOptions } from '@northern.tech/store/organizationSlice/types';	2✔
22	import { isDarkMode } from '@northern.tech/store/utils';	2✔
23	import { toggle } from '@northern.tech/utils/helpers';	2✔
24	import { useWindowSize } from '@northern.tech/utils/resizehook';	2✔
25		2✔
26	import Loader from './Loader';	2✔
27	import Pagination from './Pagination';	2✔
28	import MenderTooltip from './helptips/MenderTooltip';	2✔
29		2✔
30	const { page: defaultPage, perPage: defaultPerPage } = DEVICE_LIST_DEFAULTS;	13✔
31		2✔
32	interface Attribute {	2✔
33	name: string;	2✔
34	scope: string;	2✔
35	}	2✔
36	export interface RendererProp<T> {	2✔
37	[key: string]: any;	2✔
38	column: ColumnHeader<T>;	2✔
39	item?: T;	2✔
40	}	2✔
41		2✔
42	export interface ClassesOverrides {	2✔
43	classes: Record<string, string>;	2✔
44	}	2✔
45	export interface ColumnHeader<T> {	2✔
46	attribute: Attribute;	2✔
47	classes?: ClassesOverrides;	2✔
48	component: ComponentType<RendererProp<T> & ClassesOverrides>;	2✔
49	customize?: () => void;	2✔
50	sortable: boolean;	2✔
51	style?: CSSProperties;	2✔
52	textRender?: (props: RendererProp<T>) => string \| ReactElement;	2✔
53	title: string;	2✔
54	}	2✔
55		2✔
56	interface ListState {	2✔
57	page?: number;	2✔
58	perPage?: number;	2✔
59	selection?: number[];	2✔
60	sort?: SortOptions;	2✔
61	// selectedAttributes: unknown[];	2✔
62	// selectedIssues: unknown[];	2✔
63	// state: string;	2✔
64	total: number;	2✔
65	// setOnly: boolean;	2✔
66	// refreshTrigger: boolean;	2✔
67	// detailsTab: string;	2✔
68	// isLoading: boolean;	2✔
69	}	2✔
70		2✔
71	type wID = { id: string };	2✔
72		2✔
73	interface CommonListProps<T extends wID> {	2✔
74	columnHeaders: ColumnHeader<T>[];	2✔
75	customColumnSizes?: Attribute[];	2✔
76	idAttribute?: IdAttribute;	2✔
77	ListItemComponent: ComponentType<ListItemComponentProps<T>>;	2✔
78	listItems: T[];	2✔
79	listState: ListState;	2✔
80	onChangeRowsPerPage: (perPage: number) => void;	2✔
81	onExpandClick: (item: T) => void;	2✔
82	onPageChange: (event: MouseEvent \| null, page: number) => void;	2✔
83	onResizeColumns: ((columns: { attribute: Attribute; size: number }) => void) \| false;	2✔
84	onSelect: ((rows: number[]) => void) \| false;	2✔
85	onSort?: (attr: Attribute \| object) => void;	2✔
86	pageLoading: boolean;	2✔
87	PaginationProps?: object;	2✔
88	sortingNotes?: { [key: string]: string };	2✔
89	}	2✔
90	export interface ListItemComponentProps<T> {	2✔
91	columnHeaders: ColumnHeader<T>[];	2✔
92	idAttribute?: IdAttribute;	2✔
93	index: number;	2✔
94	key: string;	2✔
95	listItem: T;	2✔
96	listState: ListState;	2✔
97	onClick: (item: T) => void;	2✔
98	onRowSelect: (selectedRow: T) => void;	2✔
99	selectable: boolean;	2✔
100	selected: boolean;	2✔
101	}	2✔
102		2✔
103	const useStyles = makeStyles()(theme => ({	44✔
104	header: {	2✔
105	// @ts-ignore	2✔
106	color: theme.palette.text.hint	2✔
107	},	2✔
108	resizer: {	2✔
109	cursor: 'col-resize',	2✔
110	paddingLeft: 5,	2✔
111	paddingRight: 5	2✔
112	},	2✔
113	resizeHandle: {	2✔
114	width: 4,	2✔
115	background: 'initial',	2✔
116	['&.hovering']: {	2✔
117	background: theme.palette.grey[600]	2✔
118	},	2✔
119	['&.resizing']: {	2✔
120	background: isDarkMode(theme.palette.mode) ? theme.palette.grey[200] : theme.palette.grey[900]	2!
121	}	2✔
122	}	2✔
123	}));	2✔
124		2✔
125	export const minCellWidth = 150;	13✔
126		2✔
127	export const calculateResizeChange = ({ columnElements, columnHeaders, e, index, prev, selectable }) => {	13✔
128	const isShrinkage = prev > e.clientX ? -1 : 1;	2!
129	const columnDelta = Math.abs(e.clientX - prev) * isShrinkage;	2✔
130	const relevantColumns = getRelevantColumns(columnElements, selectable);	2✔
131	const canModifyNextColumn = index + 1 < columnHeaders.length - 1;	2✔
132		2✔
133	return relevantColumns.reduce((accu, element, columnIndex) => {	2✔
134	const currentWidth = element.offsetWidth;	2✔
135	const column = { attribute: columnHeaders[columnIndex + 1].attribute, size: currentWidth };	2✔
136	if (canModifyNextColumn && index === columnIndex) {	2!
137	column.size = currentWidth + columnDelta;	2✔
138	} else if (canModifyNextColumn && index + 1 === columnIndex) {	2!
139	column.size = currentWidth - columnDelta;	2✔
140	}	2✔
141	accu.push(column);	2✔
142	return accu;	2✔
143	}, []);	2✔
144	};	2✔
145	const getRelevantColumns = (columnElements, selectable) => [...columnElements].slice(selectable ? 1 : 0, columnElements.length - 1);	18✔
146	const getTemplateColumns = (columns, selectable) =>	13✔
147	selectable ? `52px ${columns} minmax(${minCellWidth}px, 1fr)` : `${columns} minmax(${minCellWidth}px, 1fr)`;	18✔
148		2✔
149	const getColumnsStyle = (columns, defaultSize, selectable) => {	13✔
150	const template = columns.map(({ size }) => `minmax(${minCellWidth}px, ${size ? `${size}px` : defaultSize})`);	58✔
151	// applying styles via state changes would lead to less smooth changes, so we set the style directly on the components	2✔
152	return getTemplateColumns(template.join(' '), selectable);	18✔
153	};	2✔
154	export const CommonList = <T extends wID>(props: CommonListProps<T>) => {	13✔
155	const {	2✔
156	columnHeaders,	2✔
157	customColumnSizes = [],	2✔
158	listItems,	2✔
159	listState,	2✔
160	idAttribute,	2✔
161	onChangeRowsPerPage,	2✔
162	PaginationProps = {},	2✔
163	onExpandClick,	2✔
164	onResizeColumns,	2✔
165	onPageChange,	2✔
166	onSelect,	2✔
167	onSort = () => {},	2!
168	pageLoading,	2✔
169	sortingNotes,	2✔
170	ListItemComponent	2✔
171	} = props;	23✔
172	const { page: pageNo = defaultPage, perPage: pageLength = defaultPerPage, selection: selectedRows = [], sort = {}, total: pageTotal = 1 } = listState;	23✔
173	const { direction: sortDown = SORTING_OPTIONS.desc, key: sortCol } = sort;	23✔
174	const listRef = useRef<HTMLDivElement \| null>(null);	23✔
175	const selectedRowsRef = useRef(selectedRows);	23✔
176	const initRef = useRef<number \| null>(null);	23✔
177	const [resizeTrigger, setResizeTrigger] = useState(false);	23✔
178		2✔
179	const size = useWindowSize();	23✔
180	const selectable = !!onSelect;	23✔
181	const { classes } = useStyles();	23✔
182		2✔
183	useEffect(() => {	23✔
184	selectedRowsRef.current = selectedRows;	10✔
185	}, [selectedRows]);	2✔
186		2✔
187	useEffect(() => {	23✔
188	if (!listRef.current) {	18!
189	return;	2✔
190	}	2✔
191	const relevantColumns = getRelevantColumns(listRef.current?.querySelector('.deviceListRow')?.children, selectable);	18✔
192	listRef.current.style.gridTemplateColumns = getColumnsStyle(	18✔
193	customColumnSizes.length && customColumnSizes.length === relevantColumns.length ? customColumnSizes : relevantColumns,	2✔
194	'1.5fr',	2✔
195	selectable	2✔
196	);	2✔
197	}, [customColumnSizes, columnHeaders, selectable, resizeTrigger, size.width]);	2✔
198		2✔
199	useEffect(() => {	23✔
200	clearTimeout(initRef.current \|\| undefined);	10✔
201	initRef.current = setTimeout(() => setResizeTrigger(toggle), TIMEOUTS.debounceDefault) as unknown as number;	10✔
202	return () => {	10✔
203	clearTimeout(initRef?.current \|\| undefined);	10!
204	};	2✔
205	}, [customColumnSizes.length]);	2✔
206		2✔
207	const onRowSelection = selectedRow => {	23✔
208	const updatedSelection = [...selectedRowsRef.current];	3✔
209	const selectedIndex = updatedSelection.indexOf(selectedRow);	3✔
210	if (selectedIndex === -1) {	3!
211	updatedSelection.push(selectedRow);	3✔
212	} else {	2✔
213	updatedSelection.splice(selectedIndex, 1);	2✔
214	}	2✔
215	if (onSelect) {	3!
216	onSelect(updatedSelection);	3✔
217	}	2✔
218	};	2✔
219		2✔
220	const onSelectAllClick = () => {	23✔
221	let newSelectedRows: number[] = Array.from({ length: listItems.length }, (_, i) => i);	6✔
222	if (selectedRows.length && selectedRows.length <= listItems.length) {	4!
223	newSelectedRows = [];	2✔
224	}	2✔
225	if (onSelect) {	4!
226	onSelect(newSelectedRows);	4✔
227	}	2✔
228	};	2✔
229		2✔
230	const handleResizeChange = useCallback(	23✔
231	(e, { index, prev, ref }) => {	2✔
232	const changedColumns = calculateResizeChange({	2✔
233	columnElements: [...ref.current.parentElement.children],	2✔
234	columnHeaders,	2✔
235	e,	2✔
236	index,	2✔
237	prev,	2✔
238	selectable	2✔
239	});	2✔
240	// applying styles via state changes would lead to less smooth changes, so we set the style directly on the components	2✔
241	if (listRef.current) listRef.current.style.gridTemplateColumns = getColumnsStyle(changedColumns, undefined, selectable);	2!
242	},	2✔
243	[columnHeaders, selectable]	2✔
244	);	2✔
245		2✔
246	const handleResizeFinish = useCallback(	23✔
247	(e, { index, prev, ref }) => {	2✔
248	const changedColumns = calculateResizeChange({	2✔
249	columnElements: ref.current.parentElement.children,	2✔
250	columnHeaders,	2✔
251	e,	2✔
252	index,	2✔
253	prev,	2✔
254	selectable	2✔
255	});	2✔
256	if (onResizeColumns) {	2!
257	onResizeColumns(changedColumns);	2✔
258	}	2✔
259	},	2✔
260	[columnHeaders, onResizeColumns, selectable]	2✔
261	);	2✔
262		2✔
263	const numSelected = (selectedRows \|\| []).length;	23!
264	return (	23✔
265	<div className={`deviceList ${selectable ? 'selectable' : ''}`} ref={listRef}>	2✔
266	<div className={`header ${classes.header}`}>	2✔
267	<div className="deviceListRow">	2✔
268	{selectable && (	2✔
269	<div>	2✔
270	<Checkbox	2✔
271	indeterminate={numSelected > 0 && numSelected < listItems.length}	2✔
272	checked={numSelected === listItems.length}	2✔
273	onChange={onSelectAllClick}	2✔
274	/>	2✔
275	</div>	2✔
276	)}	2✔
277	{columnHeaders.map((item, index) => (	2✔
278	<HeaderItem	97✔
279	column={item}	2✔
280	columnCount={columnHeaders.length}	2✔
281	index={index}	2✔
282	key={`columnHeader-${index}`}	2✔
283	onSort={onSort}	2✔
284	resizable={!!onResizeColumns}	2✔
285	sortCol={sortCol}	2✔
286	sortDown={sortDown}	2✔
287	onResizeChange={handleResizeChange}	2✔
288	onResizeFinish={handleResizeFinish}	2✔
289	sortingNotes={sortingNotes}	2✔
290	/>	2✔
291	))}	2✔
292	</div>	2✔
293	</div>	2✔
294	<div className="body">	2✔
295	{listItems.map((item, index) => (	2✔
296	<ListItemComponent	35✔
297	columnHeaders={columnHeaders}	2✔
298	listItem={item}	2✔
299	listState={listState}	2✔
300	idAttribute={idAttribute}	2✔
301	index={index}	2✔
302	key={item.id}	2✔
303	onClick={onExpandClick}	2✔
304	onRowSelect={onRowSelection}	2✔
305	selectable={selectable}	2✔
306	selected={selectedRows.indexOf(index) !== -1}	2✔
307	/>	2✔
308	))}	2✔
309	</div>	2✔
310	<div className="footer flexbox margin-top">	2✔
311	<Pagination	2✔
312	className="margin-top-none"	2✔
313	count={pageTotal}	2✔
314	rowsPerPage={pageLength}	2✔
315	onChangeRowsPerPage={onChangeRowsPerPage}	2✔
316	page={pageNo}	2✔
317	onChangePage={onPageChange}	2✔
318	{...PaginationProps}	2✔
319	/>	2✔
320	<Loader show={pageLoading} small />	2✔
321	</div>	2✔
322	</div>	2✔
323	);	2✔
324	};	2✔
325		2✔
326	interface HeaderItemProps<T> {	2✔
327	column: ColumnHeader<T>;	2✔
328	columnCount: number;	2✔
329	index: number;	2✔
330	onResizeChange: (	2✔
331	e: MouseEvent,	2✔
332	eventData: {	2✔
333	index: number;	2✔
334	prev: number;	2✔
335	ref: MutableRefObject<HTMLDivElement \| null>;	2✔
336	}	2✔
337	) => void;	2✔
338	onResizeFinish: (	2✔
339	e: MouseEvent,	2✔
340	eventData: {	2✔
341	index: number;	2✔
342	prev: number;	2✔
343	ref: MutableRefObject<HTMLDivElement \| null>;	2✔
344	}	2✔
345	) => void;	2✔
346	onSort: (attr: Attribute \| object) => void;	2✔
347	resizable: boolean;	2✔
348	sortCol?: string;	2✔
349	sortDown?: string;	2✔
350	sortingNotes?: { [key: string]: string };	2✔
351	}	2✔
352		2✔
353	const HeaderItem = <T extends wID>(props: HeaderItemProps<T>) => {	13✔
354	const { sortingNotes, column, columnCount, index, sortCol, sortDown = undefined, onSort, onResizeChange, onResizeFinish, resizable } = props;	112✔
355	const [isHovering, setIsHovering] = useState(false);	112✔
356	const [shouldRemoveListeners, setShouldRemoveListeners] = useState(false);	112✔
357	const resizeRef = useRef<null \| number>(null);	112✔
358	const ref = useRef<HTMLDivElement \| null>(null);	112✔
359	const { classes } = useStyles();	112✔
360		2✔
361	const onMouseOut = () => setIsHovering(false);	112✔
362		2✔
363	const onMouseOver = () => setIsHovering(true);	112✔
364		2✔
365	const mouseMove = useCallback(	112✔
366	(e: MouseEvent) => {	2✔
367	if (resizable && resizeRef.current) {	74!
368	onResizeChange(e, { index, prev: resizeRef.current, ref });	2✔
369	resizeRef.current = e.clientX;	2✔
370	}	2✔
371	},	2✔
372	[index, onResizeChange, resizable]	2✔
373	);	2✔
374		2✔
375	const mouseUp = useCallback(	112✔
376	(e: MouseEvent) => {	2✔
377	if (resizeRef.current) {	74!
378	onResizeFinish(e, { index, prev: resizeRef.current, ref });	2✔
379	resizeRef.current = null;	2✔
380	setShouldRemoveListeners(true);	2✔
381	}	2✔
382	},	2✔
383	[index, onResizeFinish]	2✔
384	);	2✔
385		2✔
386	const mouseDown = e => (resizeRef.current = e.clientX);	112✔
387		2✔
388	useEffect(() => {	112✔
389	window.addEventListener('mousemove', mouseMove);	67✔
390	window.addEventListener('mouseup', mouseUp);	67✔
391	return () => {	67✔
392	setShouldRemoveListeners(!!resizeRef.current);	67✔
393	};	2✔
394	}, [mouseMove, mouseUp]);	2✔
395		2✔
396	useEffect(() => {	112✔
397	if (shouldRemoveListeners) {	67!
398	window.removeEventListener('mousemove', mouseMove);	2✔
399	window.removeEventListener('mouseup', mouseUp);	2✔
400	setShouldRemoveListeners(false);	2✔
401	}	2✔
402	}, [shouldRemoveListeners, mouseMove, mouseUp]);	2✔
403		2✔
404	let resizeHandleClassName = resizable && isHovering ? 'hovering' : '';	112!
405	resizeHandleClassName = resizeRef.current ? 'resizing' : resizeHandleClassName;	112!
406	const header = (	2✔
407	<div className="columnHeader flexbox space-between relative" style={column.style} onMouseEnter={onMouseOver} onMouseLeave={onMouseOut} ref={ref}>	112✔
UNCOV 408	<div className="flexbox center-aligned" onClick={() => onSort(column.attribute ? column.attribute : {})}>	2!
409	{column.title}	2✔
410	{column.sortable && (	2✔
411	<SortIcon	2✔
412	className={`sortIcon ${sortCol === column.attribute.name ? 'selected' : ''} ${(sortDown === SORTING_OPTIONS.desc).toString()}`}	2✔
413	style={{ fontSize: 16 }}	2✔
414	/>	2✔
415	)}	2✔
416	</div>	2✔
417	<div className="flexbox center-aligned full-height">	2✔
418	{column.customize && <SettingsIcon onClick={column.customize} style={{ fontSize: 16 }} />}	2✔
419	{index < columnCount - 2 && resizable && (	2✔
420	<div onMouseDown={mouseDown} className={`${classes.resizer} full-height`}>	2✔
421	<div className={`full-height ${classes.resizeHandle} ${resizeHandleClassName}`} />	2✔
422	</div>	2✔
423	)}	2✔
424	</div>	2✔
425	</div>	2✔
426	);	2✔
427	return column.sortable && sortingNotes && sortingNotes[column.attribute.name] ? (	112!
428	<MenderTooltip title={sortingNotes[column.attribute.name]} placement="top-start">	2✔
429	{header}	2✔
430	</MenderTooltip>	2✔
431	) : (	2✔
432	header	2✔
433	);	2✔
434	};	2✔

mendersoftware / mender-server / 10423

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous