Angular deprecation: Dashboards: Add link to auto-migrate compatible panels to dashboard warning

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -14,7 +14,7 @@ import { createErrorNotification } from 'app/core/copy/appNotification';
 import { getKioskMode } from 'app/core/navigation/kiosk';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { getNavModel } from 'app/core/selectors/navModel';
-import { PanelModel } from 'app/features/dashboard/state';
+import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { AngularDeprecationNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationNotice';
 import { getPageNavFromSlug, getRootContentNavModel } from 'app/features/storage/StorageFolderPage';
@@ -349,7 +349,10 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
             </section>
           )}
           {config.featureToggles.angularDeprecationUI && dashboard.hasAngularPlugins() && dashboard.uid !== null && (
-            <AngularDeprecationNotice dashboardUid={dashboard.uid} />
+            <AngularDeprecationNotice
+              dashboardUid={dashboard.uid}
+              showAutoMigrateLink={dashboard.panels.some((x) => DashboardModel.autoMigratePluginIDs.includes(x.type))}
+            />
           )}
           <DashboardGrid
             dashboard={dashboard}

public/app/features/dashboard/state/DashboardModel.ts

@@ -121,6 +121,15 @@ export class DashboardModel implements TimeModel {
     originalDashboard: true,
   };
 
+  static autoMigratePluginIDs = [
+    'graph',
+    'table-old',
+    'grafana-piechart-panel',
+    'grafana-worldmap-panel',
+    'singlestat',
+    'grafana-singlestat-panel',
+  ];
+
   constructor(
     data: Dashboard,
     meta?: DashboardMeta,
@@ -183,6 +192,10 @@ export class DashboardModel implements TimeModel {
     // Handles both granular and all angular panel migration
     if (shouldMigrateAllAngularPanels || shouldMigrateExplicitAngularPanels) {
       for (const panel of this.panelIterator()) {
+        if (!DashboardModel.autoMigratePluginIDs.includes(panel.type)) {
+          continue;
+        }
+
         if (
           !panel.autoMigrateFrom &&
           panel.type === 'graph' &&

public/app/features/plugins/angularDeprecation/AngularDeprecationNotice.test.tsx

@@ -63,4 +63,25 @@ describe('AngularDeprecationNotice', () => {
     await userEvent.click(closeButton);
     expect(reportInteraction).toHaveBeenCalledWith('angular_deprecation_notice_dismissed');
   });
+
+  describe('auto migrate link', () => {
+    const autoMigrateText = 'Auto-migrate compatible panels.';
+
+    it('should display auto migrate link if showAutoMigrateLink is true', () => {
+      render(<AngularDeprecationNotice dashboardUid={dsUid} showAutoMigrateLink={true} />);
+      const autoMigrateLink = screen.getByText(autoMigrateText);
+      expect(autoMigrateLink).toBeInTheDocument();
+      expect(autoMigrateLink).toHaveAttribute('href', expect.stringContaining('__feature.autoMigrateOldPanels=true'));
+    });
+
+    it('should not display auto migrate link if showAutoMigrateLink is false', () => {
+      render(<AngularDeprecationNotice dashboardUid={dsUid} showAutoMigrateLink={false} />);
+      expect(screen.queryByText(autoMigrateText)).not.toBeInTheDocument();
+    });
+
+    it('should not display auto migrate link if showAutoMigrateLink is not provided', () => {
+      render(<AngularDeprecationNotice dashboardUid={dsUid} />);
+      expect(screen.queryByText(autoMigrateText)).not.toBeInTheDocument();
+    });
+  });
 });

public/app/features/plugins/angularDeprecation/AngularDeprecationNotice.tsx

@@ -12,9 +12,19 @@ function localStorageKey(dashboardUid: string): string {
 
 export interface Props {
   dashboardUid: string;
+  showAutoMigrateLink?: boolean;
 }
 
-export function AngularDeprecationNotice({ dashboardUid }: Props) {
+function autoMigrateHref(): string {
+  const autoMigrateParam = '__feature.autoMigrateOldPanels';
+  const url = new URL(window.location.toString());
+  if (!url.searchParams.has(autoMigrateParam)) {
+    url.searchParams.append(autoMigrateParam, 'true');
+  }
+  return url.toString();
+}
+
+export function AngularDeprecationNotice({ dashboardUid, showAutoMigrateLink }: Props) {
   return (
     <LocalStorageValueProvider<boolean> storageKey={localStorageKey(dashboardUid)} defaultValue={false}>
       {(isDismissed, onDismiss) => {
@@ -43,6 +53,13 @@ export function AngularDeprecationNotice({ dashboardUid }: Props) {
                       Read our deprecation notice and migration advice.
                     </a>
                   </li>
+                  {showAutoMigrateLink && (
+                    <li>
+                      <a href={autoMigrateHref()} className="external-link" target="_blank" rel="noreferrer">
+                        Auto-migrate compatible panels.
+                      </a>
+                    </li>
+                  )}
                 </ul>
               </div>
             </Alert>