feat: add quick compare action

src/components/molecules/QuickActionCompare/QuickActionCompare.tsx

@@ -0,0 +1,28 @@
+import React, {useCallback} from 'react';
+
+import {useAppDispatch} from '@redux/hooks';
+import {ComparisonView, compareToggled} from '@redux/reducers/compare';
+
+import * as S from './styled';
+
+export const QuickActionCompare = (props: {isItemSelected: boolean; view: ComparisonView}) => {
+  const {isItemSelected, view} = props;
+
+  const dispatch = useAppDispatch();
+  const handleCompare = useCallback(() => {
+    dispatch(
+      compareToggled({
+        value: true,
+        initialView: view,
+      })
+    );
+  }, [dispatch, view]);
+
+  return (
+    <S.Container>
+      <S.PreviewSpan isItemSelected={isItemSelected} onClick={handleCompare}>
+        Compare
+      </S.PreviewSpan>
+    </S.Container>
+  );
+};

src/components/molecules/QuickActionCompare/index.ts

@@ -0,0 +1 @@
+export * from './QuickActionCompare';

src/components/molecules/QuickActionCompare/styled.tsx

@@ -0,0 +1,35 @@
+import {Spin as RawSpin} from 'antd';
+
+import {LoadingOutlined} from '@ant-design/icons';
+
+import styled from 'styled-components';
+
+import Colors from '@styles/Colors';
+
+export const PreviewLoadingIcon = <LoadingOutlined style={{fontSize: 16}} spin />;
+
+export const PreviewSpan = styled.span<{isItemSelected: boolean}>`
+  font-weight: 500;
+  font-size: 12px;
+  cursor: pointer;
+  color: ${props => (props.isItemSelected ? Colors.blackPure : Colors.blue6)};
+  margin-left: 5px;
+  margin-right: 15px;
+`;
+
+export const ReloadSpan = styled.span<{isItemSelected: boolean}>`
+  margin-right: 15px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  color: ${props => (props.isItemSelected ? Colors.blackPure : Colors.blue6)};
+`;
+
+export const Container = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+export const Spin = styled(RawSpin)`
+  margin-right: 15px;
+`;

src/navsections/HelmChartSectionBlueprint/HelmChartQuickAction.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback} from 'react';
 import {useHotkeys} from 'react-hotkeys-hook';
 
 import hotkeys from '@constants/hotkeys';
@@ -8,50 +8,78 @@ import {ItemCustomComponentProps} from '@models/navigator';
 
 import {useAppDispatch, useAppSelector} from '@redux/hooks';
 import {selectHelmValuesFile} from '@redux/reducers/main';
+import {selectValuesFile} from '@redux/selectors';
 import {restartPreview, startPreview, stopPreview} from '@redux/services/preview';
 
+import {QuickActionCompare} from '@components/molecules/QuickActionCompare';
 import QuickActionPreview from '@components/molecules/QuickActionPreview';
 
 import {defineHotkey} from '@utils/defineHotkey';
+import {isDefined} from '@utils/filter';
 
 const QuickAction = (props: ItemCustomComponentProps) => {
   const {itemInstance} = props;
   const dispatch = useAppDispatch();
-  const selectedValuesFileId = useAppSelector(state => state.main.selectedValuesFileId);
-  const previewValuesFileId = useAppSelector(state => state.main.previewValuesFileId);
-
-  const isItemBeingPreviewed = useMemo(
-    () => previewValuesFileId !== undefined && previewValuesFileId === itemInstance.id,
-    [previewValuesFileId, itemInstance]
-  );
+  const thisValuesFile = useAppSelector(state => {
+    return selectValuesFile(state.main, itemInstance.id);
+  });
+  const selectedValuesFile = useAppSelector(state => {
+    return selectValuesFile(state.main, state.main.selectedPreviewConfigurationId);
+  });
+  const previewValuesFile = useAppSelector(state => {
+    return selectValuesFile(state.main, state.main.previewValuesFileId);
+  });
+  const isAnyPreviewing = isDefined(previewValuesFile);
+  const isThisPreviewing = itemInstance.id === previewValuesFile?.id;
+  const isThisSelected = itemInstance.id === selectedValuesFile?.id;
 
   const selectAndPreviewHelmValuesFile = useCallback(() => {
-    if (itemInstance.id !== selectedValuesFileId) {
+    if (!isThisSelected) {
       dispatch(selectHelmValuesFile({valuesFileId: itemInstance.id}));
     }
-    if (itemInstance.id !== previewValuesFileId) {
+    if (!isThisPreviewing) {
       startPreview(itemInstance.id, 'helm', dispatch);
     } else {
       stopPreview(dispatch);
     }
-  }, [itemInstance, selectedValuesFileId, previewValuesFileId, dispatch]);
+  }, [isThisSelected, isThisPreviewing, dispatch, itemInstance.id]);
 
   const reloadPreview = useCallback(() => {
-    if (itemInstance.id !== selectedValuesFileId) {
+    if (!isThisSelected) {
       dispatch(selectHelmValuesFile({valuesFileId: itemInstance.id}));
     }
 
     restartPreview(itemInstance.id, 'helm', dispatch);
-  }, [itemInstance, selectedValuesFileId, dispatch]);
+  }, [isThisSelected, itemInstance.id, dispatch]);
 
   useHotkeys(defineHotkey(hotkeys.RELOAD_PREVIEW.key), () => {
     reloadPreview();
   });
 
+  if (isAnyPreviewing && !isThisPreviewing) {
+    return (
+      <QuickActionCompare
+        isItemSelected={itemInstance.isSelected}
+        view={{
+          leftSet: {
+            type: 'helm',
+            chartId: previewValuesFile.helmChartId,
+            valuesId: previewValuesFile.id,
+          },
+          rightSet: {
+            type: 'helm',
+            chartId: thisValuesFile?.helmChartId,
+            valuesId: thisValuesFile?.id,
+          },
+        }}
+      />
+    );
+  }
+
   return (
     <QuickActionPreview
       isItemSelected={itemInstance.isSelected}
-      isItemBeingPreviewed={isItemBeingPreviewed}
+      isItemBeingPreviewed={isThisPreviewing}
       previewTooltip={HelmPreviewTooltip}
       reloadPreviewTooltip={ReloadHelmPreviewTooltip}
       exitPreviewTooltip={ExitHelmPreviewTooltip}

src/redux/selectors.ts

@@ -4,6 +4,8 @@ import {createSelector} from 'reselect';
 import {CLUSTER_DIFF_PREFIX, PREVIEW_PREFIX, ROOT_FILE_ENTRY} from '@constants/constants';
 
 import {AppConfig, ProjectConfig} from '@models/appconfig';
+import {AppState} from '@models/appstate';
+import {HelmValuesFile} from '@models/helm';
 import {K8sResource} from '@models/k8sresource';
 import {ResourceKindHandler} from '@models/resourcekindhandler';
 import {RootState} from '@models/rootstate';
@@ -95,6 +97,11 @@ export const helmValuesSelector = createSelector(
   helmValuesMap => helmValuesMap
 );
 
+export const selectValuesFile = (state: AppState, id?: string): HelmValuesFile | undefined => {
+  if (!id) return undefined;
+  return state.helmValuesMap[id];
+};
+
 export const isInPreviewModeSelector = (state: RootState) =>
   Boolean(state.main.previewResourceId) ||
   Boolean(state.main.previewValuesFileId) ||