feat: select/deselect all cluster compare matches

kubeshop · Nov 18, 2021 · b231cb0 · b231cb0
1 parent ded1626
commit b231cb0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionNameDisplay.tsx b/src/navsections/ClusterDiffSectionBlueprint/ClusterDiffSectionNameDisplay.tsx
@@ -1,8 +1,9 @@
-import {Button} from 'antd';
+import {Button, Checkbox} from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {selectAllClusterDiffMatches, unselectAllClusterDiffMatches} from '@redux/reducers/main';
 import {isInPreviewModeSelector} from '@redux/selectors';
 import {stopPreview} from '@redux/services/preview';
 import {loadClusterDiff} from '@redux/thunks/loadClusterDiff';
@@ -41,12 +42,28 @@ const StyledTitle = styled.h1`
   margin-bottom: 8px;
 `;
 
+const CheckboxWrapper = styled.div`
+  display: inline-block;
+  margin-top: 16px;
+  cursor: pointer;
+  margin-left: 8px;
+`;
+
+const CheckboxLabel = styled.span`
+  margin-left: 5px;
+`;
+
 const ReloadButton = styled(Button)``;
 
 function ResourceDiffSectionNameDisplay() {
   const dispatch = useAppDispatch();
   const isInPreviewMode = useAppSelector(isInPreviewModeSelector);
 
+  const areAllMatchesSelected = useAppSelector(
+    state =>
+      state.main.clusterDiff.selectedMatches.length === state.main.clusterDiff.clusterToLocalResourcesMatches.length
+  );
+
   const onClickReload = () => {
     dispatch(loadClusterDiff());
   };
@@ -55,6 +72,14 @@ function ResourceDiffSectionNameDisplay() {
     stopPreview(dispatch);
   };
 
+  const onClickSelectAll = () => {
+    if (areAllMatchesSelected) {
+      dispatch(unselectAllClusterDiffMatches());
+    } else {
+      dispatch(selectAllClusterDiffMatches());
+    }
+  };
+
   return (
     <NameDisplayContainer>
       <TagsContainer>
@@ -75,6 +100,10 @@ function ResourceDiffSectionNameDisplay() {
           </ReloadButton>
         </TagWrapper>
       </TagsContainer>
+      <CheckboxWrapper onClick={onClickSelectAll}>
+        <Checkbox checked={areAllMatchesSelected} />
+        <CheckboxLabel>{areAllMatchesSelected ? 'Deselect all' : 'Select all'}</CheckboxLabel>
+      </CheckboxWrapper>
     </NameDisplayContainer>
   );
 }

diff --git a/src/redux/reducers/main.ts b/src/redux/reducers/main.ts
@@ -447,12 +447,20 @@ export const mainSlice = createSlice({
         state.clusterDiff.selectedMatches.push(matchId);
       }
     },
+    selectAllClusterDiffMatches: (state: Draft<AppState>) => {
+      state.clusterDiff.selectedMatches = state.clusterDiff.clusterToLocalResourcesMatches.map(
+        match => `${match.resourceName}#${match.resourceKind}#${match.resourceNamespace}`
+      );
+    },
     unselectClusterDiffMatch: (state: Draft<AppState>, action: PayloadAction<string>) => {
       const matchId = action.payload;
       if (state.clusterDiff.selectedMatches.includes(matchId)) {
         state.clusterDiff.selectedMatches = state.clusterDiff.selectedMatches.filter(m => m !== matchId);
       }
     },
+    unselectAllClusterDiffMatches: (state: Draft<AppState>) => {
+      state.clusterDiff.selectedMatches = [];
+    },
   },
   extraReducers: builder => {
     builder
@@ -611,13 +619,15 @@ export const mainSlice = createSlice({
         state.clusterDiff.diffResourceId = undefined;
         state.clusterDiff.refreshDiffResource = undefined;
         state.clusterDiff.shouldReload = undefined;
+        state.clusterDiff.selectedMatches = [];
       })
       .addCase(loadClusterDiff.rejected, state => {
         state.clusterDiff.hasLoaded = true;
         state.clusterDiff.hasFailed = true;
         state.clusterDiff.diffResourceId = undefined;
         state.clusterDiff.refreshDiffResource = undefined;
         state.clusterDiff.shouldReload = undefined;
+        state.clusterDiff.selectedMatches = [];
       })
       .addCase(loadClusterDiff.fulfilled, (state, action) => {
         const clusterResourceMap = action.payload.resourceMap;
@@ -716,6 +726,7 @@ export const mainSlice = createSlice({
         state.clusterDiff.diffResourceId = undefined;
         state.clusterDiff.refreshDiffResource = undefined;
         state.clusterDiff.shouldReload = undefined;
+        state.clusterDiff.selectedMatches = [];
       });
 
     builder.addCase(closeClusterDiff.type, state => {
@@ -729,6 +740,7 @@ export const mainSlice = createSlice({
       state.clusterDiff.diffResourceId = undefined;
       state.clusterDiff.refreshDiffResource = undefined;
       state.clusterDiff.shouldReload = undefined;
+      state.clusterDiff.selectedMatches = [];
     });
 
     builder.addMatcher(
@@ -857,6 +869,8 @@ export const {
   setDiffResourceInClusterDiff,
   setClusterDiffRefreshDiffResource,
   selectClusterDiffMatch,
+  selectAllClusterDiffMatches,
   unselectClusterDiffMatch,
+  unselectAllClusterDiffMatches,
 } = mainSlice.actions;
 export default mainSlice.reducer;