feat: improve StatefulSet immutable field error messages

ui/src/app/applications/components/application-operation-state/application-operation-state.tsx

@@ -58,7 +58,24 @@ export const ApplicationOperationState: React.StatelessComponent<Props> = ({appl
     const operationAttributes = [
         {title: 'OPERATION', value: utils.getOperationType(application)},
         {title: 'PHASE', value: operationState.phase},
-        ...(operationState.message ? [{title: 'MESSAGE', value: operationState.message}] : []),
+        ...(operationState.message
+            ? [
+                  {
+                      title: 'MESSAGE',
+                      value: (
+                          <pre
+                              style={{
+                                  whiteSpace: 'pre-wrap',
+                                  wordBreak: 'break-word',
+                                  margin: 0,
+                                  fontFamily: 'inherit'
+                              }}>
+                              {utils.formatOperationMessage(operationState.message)}
+                          </pre>
+                      )
+                  }
+              ]
+            : []),
         {title: 'STARTED AT', value: <Timestamp date={operationState.startedAt} />},
         {
             title: 'DURATION',

ui/src/app/applications/components/utils.tsx

@@ -1546,6 +1546,36 @@ export function formatCreationTimestamp(creationTimestamp: string) {
     );
 }
 
+export function formatOperationMessage(message: string): string {
+    if (!message) {
+        return message;
+    }
+
+    const cleanMessage = message;
+
+    // Format immutable fields error message
+    if (cleanMessage.includes('attempting to change immutable fields:')) {
+        const [header, ...details] = cleanMessage.split('\n');
+        const formattedDetails = details
+            .filter(line => line.trim())
+            .map(line => {
+                if (line.startsWith('-')) {
+                    const [field, changes] = line.substring(2).split(':');
+                    if (changes) {
+                        const [from, to] = changes.split('to:').map(s => s.trim());
+                        return `   - ${field}:\n      from: ${from.replace('from:', '').trim()}\n      to:   ${to}`;
+                    }
+                }
+                return line;
+            })
+            .join('\n');
+
+        return `${header}\n${formattedDetails}`;
+    }
+
+    return cleanMessage;
+}
+
 export const selectPostfix = (arr: string[], singular: string, plural: string) => (arr.length > 1 ? plural : singular);
 
 export function getUsrMsgKeyToDisplay(appName: string, msgKey: string, usrMessages: appModels.UserMessages[]) {