enh(ui): Allow multiple results to details table, add enter delay to …

…HoverChip (#8578)
centreon · Apr 10, 2020 · a551c13 · a551c13
1 parent ce43ab8
commit a551c13
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 28 deletions.
diff --git a/www/front_src/src/Resources/columns/HoverChip.tsx b/www/front_src/src/Resources/columns/HoverChip.tsx
@@ -28,7 +28,9 @@ const HoverChip = ({ children, Chip, label, onClick }: Props): JSX.Element => {
       title={children}
       classes={{ tooltip: classes.tooltip }}
       aria-label={label}
-      enterDelay={0}
+      enterDelay={200}
+      enterNextDelay={200}
+      leaveDelay={0}
       interactive
       PopperProps={{
         onClick: (e): void => {
@@ -43,9 +45,9 @@ const HoverChip = ({ children, Chip, label, onClick }: Props): JSX.Element => {
         onClick?.();
       }}
     >
-      <div>
+      <span>
         <Chip />
-      </div>
+      </span>
     </Tooltip>
   );
 };

diff --git a/www/front_src/src/Resources/columns/State/DetailsTable/index.tsx b/www/front_src/src/Resources/columns/State/DetailsTable/index.tsx
@@ -36,17 +36,17 @@ const DetailsTable = <TDetails extends unknown>({
   endpoint,
   columns,
 }: DetailsTableProps): JSX.Element => {
-  const [details, setDetails] = useState<TDetails | null>();
+  const [details, setDetails] = useState<Array<TDetails> | null>();
   const { cancel, token } = useCancelTokenSource();
 
   useEffect(() => {
     getData<Listing<TDetails>>({
       endpoint,
       requestParams: { cancelToken: token },
     })
-      .then((retrievedDetails) => setDetails(retrievedDetails.result[0]))
+      .then((retrievedDetails) => setDetails(retrievedDetails.result))
       .catch(() => {
-        setDetails(null);
+        setDetails([]);
       });
 
     return (): void => cancel();
@@ -69,24 +69,30 @@ const DetailsTable = <TDetails extends unknown>({
           </TableRow>
         </TableHead>
         <TableBody>
-          <TableRow>
-            {loading && (
+          {loading && (
+            <TableRow>
               <TableCell colSpan={columns.length}>
                 <Skeleton height={20} animation="wave" />
               </TableCell>
-            )}
-            {success &&
-              columns.map(({ label, getFormattedString }) => (
-                <TableCell key={label}>
-                  <span>{getFormattedString?.(details)}</span>
-                </TableCell>
-              ))}
-            {error && (
+            </TableRow>
+          )}
+          {success &&
+            details?.map((detail) => (
+              <TableRow>
+                {columns.map(({ label, getFormattedString }) => (
+                  <TableCell key={label}>
+                    <span>{getFormattedString?.(detail)}</span>
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          {error && (
+            <TableRow>
               <TableCell align="center" colSpan={columns.length}>
                 <span>{labelSomethingWentWrong}</span>
               </TableCell>
-            )}
-          </TableRow>
+            </TableRow>
+          )}
         </TableBody>
       </Table>
     </TableContainer>

diff --git a/www/front_src/src/Resources/index.test.tsx b/www/front_src/src/Resources/index.test.tsx
@@ -646,11 +646,11 @@ describe(Resources, () => {
     fireEvent.mouseEnter(getByLabelText(chipLabel));
     fireEvent.mouseOver(getByLabelText(chipLabel));
 
-    await waitFor(() => expect(mockedAxios.get).toHaveBeenCalled());
-
-    expect(mockedAxios.get).toHaveBeenLastCalledWith(
-      entityInDowntime?.downtime_endpoint,
-      cancelTokenRequestParam,
+    await waitFor(() =>
+      expect(mockedAxios.get).toHaveBeenLastCalledWith(
+        entityInDowntime?.downtime_endpoint,
+        cancelTokenRequestParam,
+      ),
     );
 
     expect(getByText('admin')).toBeInTheDocument();
@@ -690,11 +690,11 @@ describe(Resources, () => {
     fireEvent.mouseEnter(getByLabelText(chipLabel));
     fireEvent.mouseOver(getByLabelText(chipLabel));
 
-    await waitFor(() => expect(mockedAxios.get).toHaveBeenCalled());
-
-    expect(mockedAxios.get).toHaveBeenLastCalledWith(
-      acknowledgedEntity?.acknowledgement_endpoint,
-      cancelTokenRequestParam,
+    await waitFor(() =>
+      expect(mockedAxios.get).toHaveBeenLastCalledWith(
+        acknowledgedEntity?.acknowledgement_endpoint,
+        cancelTokenRequestParam,
+      ),
     );
 
     expect(getByText('admin')).toBeInTheDocument();