• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

mendersoftware / gui / 1350829378

27 Jun 2024 01:46PM UTC coverage: 83.494% (-16.5%) from 99.965%
1350829378

Pull #4465

gitlab-ci

mzedel
chore: test fixes

Signed-off-by: Manuel Zedel <manuel.zedel@northern.tech>
Pull Request #4465: MEN-7169 - feat: added multi sorting capabilities to devices view

4506 of 6430 branches covered (70.08%)

81 of 100 new or added lines in 14 files covered. (81.0%)

1661 existing lines in 163 files now uncovered.

8574 of 10269 relevant lines covered (83.49%)

160.6 hits per line

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

80.0
/src/js/components/search-result.js
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, { useEffect, useState } from 'react';
15
import { useDispatch, useSelector } from 'react-redux';
16
import { useNavigate } from 'react-router-dom';
17

18
import { Close as CloseIcon } from '@mui/icons-material';
19
// material ui
20
import { ClickAwayListener, Drawer, IconButton, Typography } from '@mui/material';
21
import { makeStyles } from 'tss-react/mui';
22

23
import pluralize from 'pluralize';
24

25
import { setSearchState } from '../actions/appActions';
26
import { setDeviceListState } from '../actions/deviceActions';
27
import { TIMEOUTS } from '../constants/appConstants';
28
import { getIdAttribute, getMappedDevicesList, getUserSettings } from '../selectors';
29
import { getHeaders } from './devices/authorized-devices';
30
import { routes } from './devices/base-devices';
31
import Devicelist from './devices/devicelist';
32

33
const useStyles = makeStyles()(theme => ({
16✔
34
  drawerOffset: {
35
    top: theme.mixins.toolbar.minHeight + 1,
36
    left: 200
37
  },
38
  paper: {
39
    maxWidth: '100vw',
40
    minHeight: '20vh',
41
    boxShadow: 'none'
42
  }
43
}));
44

45
const leftNavOffset = 500;
2✔
46
const ResultTitle = ({ onClick, term, total }) => {
2✔
47
  const content = `${total ? total : 'No'} ${pluralize('device', total)} found for "${term}"`;
2!
48
  let props = { className: 'bold' };
2✔
49
  let style = {};
2✔
50
  if (!total) {
2!
51
    props = { className: 'info' };
2✔
52
    style = { width: `calc(100% - ${leftNavOffset}px)` };
2✔
53
  }
54
  return (
2✔
55
    <div className={`flexbox ${total ? 'center-aligned' : 'centered'}`} style={style}>
2!
56
      <Typography variant="body2" {...props}>
57
        {content}
58
      </Typography>
59
      <a className="margin-left-large" onClick={onClick}>
60
        clear search
61
      </a>
62
    </div>
63
  );
64
};
65

66
export const SearchResult = ({ onToggleSearchResult, open = true }) => {
2!
67
  const navigate = useNavigate();
31✔
68
  const dispatch = useDispatch();
31✔
69

70
  const { columnSelection } = useSelector(getUserSettings);
31✔
71
  const customColumnSizes = useSelector(state => state.users.customColumns);
2,152✔
72
  const devices = useSelector(state => getMappedDevicesList(state, 'search'));
2,152✔
73
  const idAttribute = useSelector(getIdAttribute);
31✔
74
  const searchState = useSelector(state => state.app.searchState);
2,152✔
75

76
  const { classes } = useStyles();
31✔
77

78
  const [columnHeaders, setColumnHeaders] = useState(getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute));
31✔
79

80
  const { isSearching, searchTerm, searchTotal } = searchState;
31✔
81

82
  useEffect(() => {
31✔
83
    const columnHeaders = getHeaders(columnSelection, routes.devices.defaultHeaders, idAttribute);
8✔
84
    setColumnHeaders(columnHeaders);
8✔
85
  }, [columnSelection, idAttribute, idAttribute.attribute]);
86

87
  useEffect(() => {
31✔
88
    if (!open && isSearching) {
14!
UNCOV
89
      onToggleSearchResult();
×
90
    }
91
  }, [open, isSearching, onToggleSearchResult]);
92

93
  useEffect(() => {
31✔
94
    if (open && !searchTerm) {
14!
UNCOV
95
      onToggleSearchResult();
×
96
    }
97
  }, [onToggleSearchResult, open, searchTerm]);
98

99
  const onDeviceSelect = device => {
31✔
UNCOV
100
    dispatch(setDeviceListState({ selectedId: device.id }));
×
UNCOV
101
    onToggleSearchResult();
×
UNCOV
102
    setTimeout(() => navigate(`/devices/${device.status}?id=${device.id}`), TIMEOUTS.debounceShort);
×
103
  };
104

105
  const handlePageChange = page => {
31✔
UNCOV
106
    dispatch(setSearchState({ page }));
×
107
  };
108

109
  const onClearClick = () => {
31✔
UNCOV
110
    dispatch(setSearchState({ searchTerm: '' }));
×
UNCOV
111
    onToggleSearchResult();
×
112
  };
113

114
  return (
31✔
115
    <ClickAwayListener onClickAway={onToggleSearchResult}>
116
      <Drawer
117
        anchor="top"
118
        classes={classes}
119
        disableEnforceFocus
120
        open={open}
121
        ModalProps={{ className: classes.drawerOffset, BackdropProps: { className: classes.drawerOffset } }}
122
        PaperProps={{ className: `${classes.drawerOffset} ${classes.paper}` }}
123
        SlideProps={{ direction: 'left' }}
124
      >
125
        <div className="flexbox center-aligned margin-bottom-small space-between">
126
          <ResultTitle onClick={onClearClick} term={searchTerm} total={searchTotal} />
127
          <IconButton onClick={onToggleSearchResult} aria-label="close" size="large">
128
            <CloseIcon />
129
          </IconButton>
130
        </div>
131
        {!!searchTotal && (
31!
132
          <Devicelist
133
            columnHeaders={columnHeaders}
134
            customColumnSizes={customColumnSizes}
135
            deviceListState={{ perPage: 10, sort: [] }} // there's no backend support for sorting search results
136
            devices={devices}
137
            idAttribute={idAttribute}
138
            PaginationProps={{ rowsPerPageOptions: [10] }}
139
            pageTotal={searchTotal}
140
            onPageChange={handlePageChange}
141
            pageLoading={isSearching}
142
            onExpandClick={onDeviceSelect}
143
          />
144
        )}
145
      </Drawer>
146
    </ClickAwayListener>
147
  );
148
};
149

150
export default SearchResult;
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc