feat: logic to apply resources in cluster diff

src/components/molecules/SectionRenderer/ItemRenderer/styled.tsx

@@ -47,7 +47,6 @@ export const ItemName = styled.span<{
   level: number;
 }>`
   padding: 2px 0;
-  cursor: pointer;
   font-size: 12px;
   ${props => {
     if (props.isSelected) {

src/components/organisms/NavigatorDiffPane/NavigatorDiffPane.tsx

@@ -26,12 +26,21 @@ function NavigatorDiffPane() {
   const hasNavigatorDiffFailed = useAppSelector(state => state.main.navigatorDiff.hasFailed);
   const isNavigatorDiffVisible = useAppSelector(state => state.ui.isNavigatorDiffVisible);
   const isInPreviewMode = useAppSelector(isInPreviewModeSelector);
+  const isApplyingResource = useAppSelector(state => state.main.isApplyingResource);
 
   useEffect(() => {
     dispatch(loadNavigatorDiff());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInPreviewMode]);
 
+  // TODO: improve this by updating the clusterToLocalResourcesMatches after apply instead of reloading the entire navigator diff
+  useEffect(() => {
+    if (!isApplyingResource) {
+      dispatch(loadNavigatorDiff());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isApplyingResource]);
+
   const closeDrawer = useCallback(() => {
     dispatch(closeNavigatorDiff());
   }, [dispatch]);

src/constants/tooltips.ts

@@ -26,3 +26,6 @@ export const HelmPreviewModeTooltip = 'Set which Helm command to use when genera
 export const KustomizeCommandTooltip = 'Set how to invoke kustomize when previewing and applying kustomization files';
 export const AutoLoadLastFolderTooltip = 'Load last folder when starting Monokle';
 export const SaveUnsavedResourceTooltip = 'Save resource to file';
+export const ClusterDiffApplyTooltip = 'Apply this resource to your configured cluster';
+export const ClusterDiffSaveTooltip = 'Save this resource to the currently selected folder';
+export const ClusterDiffCompareTooltip = 'Compare resources - Opens the Diff Modal';

src/navsections/ClusterDiffSectionBlueprint/ClusterDiffNameDisplay.tsx

@@ -4,6 +4,12 @@ import {K8sResource} from '@models/k8sresource';
 import styled from 'styled-components';
 import Colors from '@styles/Colors';
 import {SwapOutlined, ArrowLeftOutlined, ArrowRightOutlined} from '@ant-design/icons';
+import {performResourceDiff} from '@redux/thunks/diffResource';
+import {useAppDispatch, useAppSelector} from '@redux/hooks';
+import {Tooltip} from 'antd';
+import {TOOLTIP_DELAY} from '@constants/constants';
+import {ClusterDiffApplyTooltip, ClusterDiffCompareTooltip, ClusterDiffSaveTooltip} from '@constants/tooltips';
+import {applyResourceWithConfirm} from '@redux/services/applyResourceWithConfirm';
 
 const Container = styled.div`
   width: 800px;
@@ -26,25 +32,58 @@ const IconsContainer = styled.div`
 
 function ClusterDiffNameDisplay(props: ItemCustomComponentProps) {
   const {itemInstance} = props;
+  const dispatch = useAppDispatch();
+  const resourceMap = useAppSelector(state => state.main.resourceMap);
+  const fileMap = useAppSelector(state => state.main.fileMap);
+  const kubeconfigPath = useAppSelector(state => state.config.kubeconfigPath);
+
   const {clusterResource, localResources} = (itemInstance.meta || {}) as {
     clusterResource?: K8sResource;
     localResources?: K8sResource[];
   };
   const firstLocalResource = useMemo(() => {
     return localResources && localResources.length > 0 ? localResources[0] : undefined;
   }, [localResources]);
+
+  const onClickDiff = () => {
+    if (!firstLocalResource) {
+      return;
+    }
+    dispatch(performResourceDiff(firstLocalResource.id));
+  };
+
+  const onClickApply = () => {
+    if (!firstLocalResource) {
+      return;
+    }
+    applyResourceWithConfirm(firstLocalResource, resourceMap, fileMap, dispatch, kubeconfigPath);
+  };
+
   if (!clusterResource && !localResources) {
     return null;
   }
+
   return (
     <Container>
-      <Label disabled={!clusterResource}>{itemInstance.name}</Label>
+      <Label disabled={!firstLocalResource}>{itemInstance.name}</Label>
       <IconsContainer>
-        <ArrowRightOutlined />
-        <SwapOutlined />
-        <ArrowLeftOutlined />
+        {firstLocalResource && (
+          <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={ClusterDiffApplyTooltip}>
+            <ArrowRightOutlined onClick={onClickApply} />
+          </Tooltip>
+        )}
+        {clusterResource && firstLocalResource && (
+          <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={ClusterDiffCompareTooltip}>
+            <SwapOutlined onClick={onClickDiff} />
+          </Tooltip>
+        )}
+        {clusterResource && (
+          <Tooltip mouseEnterDelay={TOOLTIP_DELAY} title={ClusterDiffSaveTooltip}>
+            <ArrowLeftOutlined />
+          </Tooltip>
+        )}
       </IconsContainer>
-      <Label disabled={!firstLocalResource}>{itemInstance.name}</Label>
+      <Label disabled={!clusterResource}>{itemInstance.name}</Label>
     </Container>
   );
 }

src/redux/thunks/applyResource.ts

@@ -140,7 +140,7 @@ export async function applyResource(
           dispatch(setAlert(alert));
           dispatch(setApplyingResource(false));
         });
-      } catch (e) {
+      } catch (e: any) {
         log.error(e.message);
         dispatch(setApplyingResource(true));
       }