1315496247

Committed 03 Jun 2024 07:49AM UTC coverage: 83.437% (-16.5%) from 99.964%

Build # 1315496247

Build Type

Pull #4434

gitlab-ci

Committed by

mzedel

Commit Message

chore: aligned snapshots with updated mui version

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>

Pull Request Pull Request #4434: chore: Bump the mui group with 3 updates

Run Details

4476 of 6391 branches covered (70.04%)

8488 of 10173 relevant lines covered (83.44%)

140.36 hits per line

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

45.0

/src/js/components/common/detailstable.js

// Copyright 2022 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 React from 'react';

// material ui
import { Sort as SortIcon } from '@mui/icons-material';
import { Checkbox, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import { makeStyles } from 'tss-react/mui';

import { SORTING_OPTIONS } from '../../constants/appConstants';

const useStyles = makeStyles()(() => ({
  header: {
    '.columnHeader': {
      display: 'table-cell'
    },
    '.columnHeader .sortIcon': {
      marginBottom: -6
    },
    '.nonSortable': { cursor: 'initial' }
  }
}));

export const DetailsTable = ({
  className = '',
  columns,
  items,
  onChangeSorting,
  onItemClick,
  sort = {},
  style = {},
  tableRef,
  onRowSelected = undefined,
  selectedRows = []
}) => {
  const { classes } = useStyles();

  const onRowSelection = selectedRow => {
    let updatedSelection = [...selectedRows];
    const selectedIndex = updatedSelection.indexOf(selectedRow);
    if (selectedIndex === -1) {
      updatedSelection.push(selectedRow);
    } else {
      updatedSelection.splice(selectedIndex, 1);
    }
    onRowSelected(updatedSelection);
  };

  const onSelectAllClick = () => {
    let newSelectedRows = Array.from({ length: items.length }, (_, index) => index);
    if (selectedRows.length && selectedRows.length <= items.length) {
      newSelectedRows = [];
    }
    onRowSelected(newSelectedRows);
  };

  return (
    <Table className={`margin-bottom ${className}`} style={style} ref={tableRef}>
      <TableHead className={classes.header}>
        <TableRow>
          {onRowSelected !== undefined && (
            <TableCell>
              <Checkbox indeterminate={false} checked={selectedRows.length === items.length} onChange={onSelectAllClick} />
            </TableCell>
          )}
          {columns.map(({ extras, key, renderTitle, sortable, title }) => (
            <TableCell key={key} className={`columnHeader ${sortable ? '' : 'nonSortable'}`} onClick={() => (sortable ? onChangeSorting(key) : null)}>
              {renderTitle ? renderTitle(extras) : title}
              {sortable && <SortIcon className={`sortIcon ${sort.key === key ? 'selected' : ''} ${(sort.direction === SORTING_OPTIONS.desc).toString()}`} />}
            </TableCell>
          ))}
        </TableRow>
      </TableHead>
      <TableBody>
        {items.map((item, index) => (
          <TableRow className={onItemClick ? 'clickable' : ''} hover key={item.id || index}>
            {onRowSelected !== undefined && (
              <TableCell>
                <Checkbox checked={selectedRows.includes(index)} onChange={() => onRowSelection(index)} />
              </TableCell>
            )}
            {columns.map(column => (
              <TableCell className="relative" key={column.key} onClick={() => (onItemClick ? onItemClick(item) : null)}>
                {column.render(item, column.extras)}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default DetailsTable;

1	// Copyright 2022 Northern.tech AS
2	//
3	// Licensed under the Apache License, Version 2.0 (the "License");
4	// you may not use this file except in compliance with the License.
5	// You may obtain a copy of the License at
6	//
7	// http://www.apache.org/licenses/LICENSE-2.0
8	//
9	// Unless required by applicable law or agreed to in writing, software
10	// distributed under the License is distributed on an "AS IS" BASIS,
11	// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12	// See the License for the specific language governing permissions and
13	// limitations under the License.
14	import React from 'react';
15
16	// material ui
17	import { Sort as SortIcon } from '@mui/icons-material';
18	import { Checkbox, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
19	import { makeStyles } from 'tss-react/mui';
20
21	import { SORTING_OPTIONS } from '../../constants/appConstants';
22
23	const useStyles = makeStyles()(() => ({	19✔
24	header: {
25	'.columnHeader': {
26	display: 'table-cell'
27	},
28	'.columnHeader .sortIcon': {
29	marginBottom: -6
30	},
31	'.nonSortable': { cursor: 'initial' }
32	}
33	}));
34
35	export const DetailsTable = ({	19✔
36	className = '',	65✔
37	columns,
38	items,
39	onChangeSorting,
40	onItemClick,
41	sort = {},	37✔
42	style = {},	72✔
43	tableRef,
44	onRowSelected = undefined,	37✔
45	selectedRows = []	37✔
46	}) => {
47	const { classes } = useStyles();	72✔
48
49	const onRowSelection = selectedRow => {	72✔
50	let updatedSelection = [...selectedRows];	×
51	const selectedIndex = updatedSelection.indexOf(selectedRow);	×
52	if (selectedIndex === -1) {	×
53	updatedSelection.push(selectedRow);	×
54	} else {
55	updatedSelection.splice(selectedIndex, 1);	×
56	}
57	onRowSelected(updatedSelection);	×
58	};
59
60	const onSelectAllClick = () => {	72✔
61	let newSelectedRows = Array.from({ length: items.length }, (_, index) => index);	×
62	if (selectedRows.length && selectedRows.length <= items.length) {	×
63	newSelectedRows = [];	×
64	}
65	onRowSelected(newSelectedRows);	×
66	};
67
68	return (	72✔
69	<Table className={`margin-bottom ${className}`} style={style} ref={tableRef}>
70	<TableHead className={classes.header}>
71	<TableRow>
72	{onRowSelected !== undefined && (	107✔
73	<TableCell>
74	<Checkbox indeterminate={false} checked={selectedRows.length === items.length} onChange={onSelectAllClick} />
75	</TableCell>
76	)}
77	{columns.map(({ extras, key, renderTitle, sortable, title }) => (
78	<TableCell key={key} className={`columnHeader ${sortable ? '' : 'nonSortable'}`} onClick={() => (sortable ? onChangeSorting(key) : null)}>	341!
79	{renderTitle ? renderTitle(extras) : title}	341✔
80	{sortable && <SortIcon className={`sortIcon ${sort.key === key ? 'selected' : ''} ${(sort.direction === SORTING_OPTIONS.desc).toString()}`} />}	551✔
81	</TableCell>
82	))}
83	</TableRow>
84	</TableHead>
85	<TableBody>
86	{items.map((item, index) => (
87	<TableRow className={onItemClick ? 'clickable' : ''} hover key={item.id \|\| index}>	490✔
88	{onRowSelected !== undefined && (	867✔
89	<TableCell>
90	<Checkbox checked={selectedRows.includes(index)} onChange={() => onRowSelection(index)} />	×
91	</TableCell>
92	)}
93	{columns.map(column => (
94	<TableCell className="relative" key={column.key} onClick={() => (onItemClick ? onItemClick(item) : null)}>	1,962!
95	{column.render(item, column.extras)}
96	</TableCell>
97	))}
98	</TableRow>
99	))}
100	</TableBody>
101	</Table>
102	);
103	};
104
105	export default DetailsTable;

mendersoftware / gui / 1315496247

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