hand off branch to victor

homedepot · May 8, 2023 · 5611fef · 5611fef
1 parent 63a49d8
commit 5611fef
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/spin-observatory-plugin-deck/src/components/actions/ActionButtonsContainer.tsx b/spin-observatory-plugin-deck/src/components/actions/ActionButtonsContainer.tsx
@@ -6,13 +6,10 @@ interface IActionButtonsContainerProps {
   children: NonNullable<ReactNode>;
 }
 
-export const ActionButtonsContainer = ({ children }: IActionButtonsContainerProps) => {
-  const childrenArr = Children.toArray(children);
-  return (
-    <Grid container direction="row" alignItems="flex-start" spacing={2}>
-      {childrenArr.map((child) => (
-        <Grid item>{child}</Grid>
-      ))}
-    </Grid>
-  );
-};
+export const ActionButtonsContainer = ({ children }: IActionButtonsContainerProps) => (
+  <Grid container direction="row" alignItems="flex-start" spacing={2}>
+    {Children.toArray(children).map((child) => (
+      <Grid item>{child}</Grid>
+    ))}
+  </Grid>
+);
diff --git a/spin-observatory-plugin-deck/src/components/actions/PauseResumeButton.tsx b/spin-observatory-plugin-deck/src/components/actions/PauseResumeButton.tsx
@@ -9,8 +9,6 @@ import Paper from '@material-ui/core/Paper';
 import Popper from '@material-ui/core/Popper';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import React, { Fragment, useRef, useState } from 'react';
-
-import { RetriggerButton } from './RetriggerButton';
 import { pauseExecutions, resumeExecutions } from '../../services/gateService';
 
 interface IPauseResumeButtonProps {
@@ -52,6 +50,8 @@ export const PauseResumeButton = ({ executionIds, refreshExecutions }: IPauseRes
 
   const handleHover = () => setHover((prevHover) => !prevHover);
 
+  const isHovered = hover && executionIds.length > 0;
+
   return (
     <Fragment>
       <ButtonGroup
@@ -65,7 +65,7 @@ export const PauseResumeButton = ({ executionIds, refreshExecutions }: IPauseRes
           style={{
             width: '7rem',
             color: 'white',
-            backgroundColor: hover ? 'var(--button-primary-hover-bg)' : 'var(--color-accent)',
+            backgroundColor: isHovered ? 'var(--button-primary-hover-bg)' : 'var(--color-accent)',
           }}
           onClick={handleButtonClick}
         >
@@ -74,7 +74,7 @@ export const PauseResumeButton = ({ executionIds, refreshExecutions }: IPauseRes
         <Button
           style={{
             color: 'white',
-            backgroundColor: hover ? 'var(--button-primary-hover-bg)' : 'var(--color-accent)',
+            backgroundColor: isHovered ? 'var(--button-primary-hover-bg)' : 'var(--color-accent)',
           }}
           size="small"
           onClick={handleToggle}

diff --git a/spin-observatory-plugin-deck/src/components/actions/index.ts b/spin-observatory-plugin-deck/src/components/actions/index.ts
@@ -1,2 +1,3 @@
 export * from './PauseResumeButton';
 export * from './RetriggerButton';
+export * from './ActionButtonsContainer';
diff --git a/spin-observatory-plugin-deck/src/components/pipelines/ExecutionsTable.tsx b/spin-observatory-plugin-deck/src/components/pipelines/ExecutionsTable.tsx
@@ -1,5 +1,4 @@
 import {
-  Grid,
   Paper,
   Table,
   TableBody,
@@ -19,8 +18,7 @@ import type { IExecution } from '@spinnaker/core';
 import { ExecutionRow } from './ExecutionRow';
 import { PaginationActions } from './PaginationActions';
 import { TableHeaders } from './TableHeaders';
-import { PauseResumeButton, RetriggerButton } from '../actions';
-import { ActionButtonsContainer } from '../actions/ActionButtonsContainer';
+import { ActionButtonsContainer, PauseResumeButton, RetriggerButton } from '../actions';
 import type { IStatus } from './constants';
 import { DEFAULT_ROWS_PER_PAGE, STATUSES } from './constants';
 
@@ -37,7 +35,7 @@ interface IExecutionsTableProps {
 }
 
 export const ExecutionsTable = ({ executions, parameters, status, refreshExecutions }: IExecutionsTableProps) => {
-  const [selectedExecutions, setSelectedExecutions] = useState<string[]>([]);
+  const [selectedExecutionIds, setSelectedExecutionIds] = useState<string[]>([]);
   const [currentPage, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(DEFAULT_ROWS_PER_PAGE);
   const styles = useStyles();
@@ -58,26 +56,26 @@ export const ExecutionsTable = ({ executions, parameters, status, refreshExecuti
 
   const handleSelectAll = (e: ChangeEvent<HTMLInputElement>) => {
     if (e.target.checked) {
-      setSelectedExecutions(executions.map((e) => e.id));
+      setSelectedExecutionIds(executions.map((e) => e.id));
       return;
     }
-    setSelectedExecutions([]);
+    setSelectedExecutionIds([]);
   };
 
   const handleSelectOne = (executionId: string) => () => {
-    const selectedIdx = selectedExecutions.indexOf(executionId);
+    const selectedIdx = selectedExecutionIds.indexOf(executionId);
     let newSelected: string[] = [];
 
     if (selectedIdx === -1) {
-      newSelected = [...selectedExecutions, executionId];
+      newSelected = [...selectedExecutionIds, executionId];
     } else {
-      newSelected = selectedExecutions.filter((e) => e !== executionId);
+      newSelected = selectedExecutionIds.filter((e) => e !== executionId);
     }
 
-    setSelectedExecutions(newSelected);
+    setSelectedExecutionIds(newSelected);
   };
 
-  const isSelected = (name: string) => selectedExecutions.indexOf(name) !== -1;
+  const isSelected = (name: string) => selectedExecutionIds.indexOf(name) !== -1;
 
   return (
     <TableContainer component={Paper} classes={{ root: styles.tableContainer }}>
@@ -86,7 +84,7 @@ export const ExecutionsTable = ({ executions, parameters, status, refreshExecuti
           headers={headers}
           onSelectAll={handleSelectAll}
           rowCount={executions.length}
-          selectedCount={selectedExecutions.length}
+          selectedCount={selectedExecutionIds.length}
         />
         <TableBody>
           {executions.slice(currentPage * rowsPerPage, currentPage * rowsPerPage + rowsPerPage).map((e) => (
@@ -105,7 +103,7 @@ export const ExecutionsTable = ({ executions, parameters, status, refreshExecuti
             <TableCell colSpan={2}>
               <ActionButtonsContainer>
                 {status === STATUSES.TRIGGERED && (
-                  <PauseResumeButton executionIds={selectedExecutions} refreshExecutions={refreshExecutions} />
+                  <PauseResumeButton executionIds={selectedExecutionIds} refreshExecutions={refreshExecutions} />
                 )}
                 <RetriggerButton />
               </ActionButtonsContainer>