fix: update resource in cluster mode

src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx

@@ -10,7 +10,7 @@ export const Drawer = styled(RawDrawer)`
   & .ant-drawer-content {
     background: ${Colors.grey1};
   }
-  z-index: 10000;
+  z-index: 1000;
 
   & .ant-drawer-close {
     position: absolute;

src/components/organisms/Dashboard/Tableview/Drawer.tsx

@@ -18,6 +18,7 @@ export const Drawer = () => {
   const selectedResourceId = useAppSelector(state => state.dashboard.tableDrawer.selectedResourceId);
   const clusterResourceMetaMap = useResourceMetaMap('cluster');
   const activeTab = useAppSelector(state => state.dashboard.ui.activeTab);
+  const isApplyingResource = useAppSelector(state => state.main.isApplyingResource);
 
   const selectedResource = useResource(selectedResourceId ? {id: selectedResourceId, storage: 'cluster'} : undefined);
 
@@ -115,7 +116,11 @@ export const Drawer = () => {
         <S.TabsFooter>
           <S.ActionButtons>
             {activeTab === 'Manifest' && (
-              <S.ActionButton disabled={!selectedResource} onClick={() => handleApplyResource()}>
+              <S.ActionButton
+                loading={isApplyingResource}
+                disabled={!selectedResource}
+                onClick={() => handleApplyResource()}
+              >
                 Update
               </S.ActionButton>
             )}

src/components/organisms/LazyDrawer/LazyDrawer.styled.tsx

@@ -3,7 +3,7 @@ import {Drawer as RawDrawer} from 'antd';
 import styled from 'styled-components';
 
 export const Drawer = styled(RawDrawer)`
-  z-index: 100;
+  z-index: 1000;
 
   & .ant-drawer-close {
     position: absolute;

src/components/organisms/MessageBox/MessageBox.tsx

@@ -46,6 +46,7 @@ const MessageBox: React.FC = () => {
           />
         ),
         duration: alert.duration || 4,
+        style: {zIndex: '10000'},
       });
     }
 

src/redux/thunks/applyResource.ts

@@ -1,6 +1,6 @@
 import {createAsyncThunk} from '@reduxjs/toolkit';
 
-import _ from 'lodash';
+import _, {cloneDeep} from 'lodash';
 import log from 'loglevel';
 import {stringify} from 'yaml';
 
@@ -99,7 +99,16 @@ export async function applyResource(
 ) {
   const showAlert = options?.quiet !== true;
   const resourceMeta = resourceMetaMapByStorage[resourceIdentifeir.storage][resourceIdentifeir.id];
-  const resourceContent = resourceContentMapByStorage[resourceIdentifeir.storage][resourceIdentifeir.id];
+
+  const resourceContent = cloneDeep(resourceContentMapByStorage[resourceIdentifeir.storage][resourceIdentifeir.id]);
+
+  // Related to this https://stackoverflow.com/questions/51297136/kubectl-error-the-object-has-been-modified-please-apply-your-changes-to-the-la
+  // We need to remove certain properties before updating the resource in cluster mode
+  if (options?.isInClusterMode) {
+    delete resourceContent.object.metadata.creationTimestamp;
+    delete resourceContent.object.metadata.resourceVersion;
+  }
+
   try {
     if (resourceMeta) {
       dispatch(setApplyingResource(true));
@@ -167,6 +176,7 @@ export async function applyResource(
           }
 
           const alert = errorAlert(`Applying ${resourceMeta.name} to cluster ${context} failed`, result.stderr);
+
           if (showAlert) dispatch(setAlert(alert));
           dispatch(setApplyingResource(false));
         }