Save Drawer: reduce the number of diff elements we show (#48309)

public/app/features/dashboard/components/SaveDashboard/SaveDashboardDiff.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { useAsync } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -22,12 +22,30 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
   const loader = useAsync(async () => {
     const oldJSON = JSON.stringify(oldValue ?? {}, null, 2);
     const newJSON = JSON.stringify(newValue ?? {}, null, 2);
+
+    // Schema changes will have MANY changes that the user will not understand
+    let schemaChange: ReactElement | undefined = undefined;
+    const diffs: ReactElement[] = [];
+    let count = 0;
+    if (diff) {
+      for (const [key, changes] of Object.entries(diff)) {
+        // this takes a long time for large diffs (so this is async)
+        const g = <DiffGroup diffs={changes} key={key} title={key} />;
+        if (key === 'schemaVersion') {
+          schemaChange = g;
+        } else {
+          diffs.push(g);
+        }
+        count += changes.length;
+      }
+    }
     return {
       oldJSON,
       newJSON,
-      diffs: Object.entries(diff ?? []).map(([key, diffs]) => (
-        <DiffGroup diffs={diffs} key={key} title={key} /> // this takes a long time for large diffs
-      )),
+      schemaChange,
+      diffs,
+      count,
+      showDiffs: count < 15, // overwhelming if too many changes
     };
   }, [diff, oldValue, newValue]);
 
@@ -36,15 +54,17 @@ export const SaveDashboardDiff = ({ diff, oldValue, newValue }: SaveDashboardDif
     return <Spinner />;
   }
 
-  if (!value.diffs.length) {
+  if (value.count < 1) {
     return <div>No changes in this dashboard</div>;
   }
 
   return (
     <div>
-      <div className={styles.spacer}>{value.diffs}</div>
+      {value.schemaChange && <div className={styles.spacer}>{value.schemaChange}</div>}
+
+      {value.showDiffs && <div className={styles.spacer}>{value.diffs}</div>}
 
-      <h4>JSON Diff</h4>
+      <h4>JSON Model</h4>
       <DiffViewer oldValue={value.oldJSON} newValue={value.newJSON} />
     </div>
   );