Dashboard: Fixes and tweaks provisioning badge (#103522)

* Dashboard: Fixes and tweaks provisioning badge

* Update

* Update

* Update

* Update

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -16,7 +16,7 @@ import { Tooltip } from '../Tooltip/Tooltip';
 export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey';
 
 export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-  text: React.ReactNode;
+  text?: React.ReactNode;
   color: BadgeColor;
   icon?: IconName;
   tooltip?: PopoverContent;

public/app/features/dashboard-scene/scene/ManagedDashboardNavBarBadge.tsx

@@ -22,5 +22,5 @@ export default function ManagedDashboardNavBarBadge({ meta }: { meta: DashboardM
       text = `Plugin: ${id}`;
       break;
   }
-  return <Badge color="darkgrey" icon="exchange-alt" text={text} key="provisioned-dashboard-button-badge" />;
+  return <Badge color="purple" icon="exchange-alt" tooltip={text} key="provisioned-dashboard-button-badge" />;
 }

public/app/features/dashboard-scene/scene/NavToolbarActions.tsx

@@ -145,23 +145,6 @@ export function ToolbarActions({ dashboard }: Props) {
     });
   }
 
-  const isDevEnv = config.buildInfo.env === 'development';
-
-  toolbarActions.push({
-    group: 'icon-actions',
-    condition: isDevEnv && uid && isShowingDashboard && !isEditing,
-    render: () => (
-      <ToolbarButton
-        key="view-in-old-dashboard-button"
-        tooltip={t('dashboard.toolbar.switch-old-dashboard', 'Switch to old dashboard page')}
-        icon="apps"
-        onClick={() => {
-          locationService.partial({ scenes: false });
-        }}
-      />
-    ),
-  });
-
   toolbarActions.push({
     group: 'icon-actions',
     condition: meta.isSnapshot && !isEditing,

public/app/features/dashboard-scene/scene/new-toolbar/LeftActions.tsx

@@ -9,7 +9,7 @@ import { ManagedDashboardBadge } from './actions/ManagedDashboardBadge';
 import { OpenSnapshotOriginButton } from './actions/OpenSnapshotOriginButton';
 import { PublicDashboardBadge } from './actions/PublicDashboardBadge';
 import { StarButton } from './actions/StarButton';
-import { getDynamicActions, renderActionElements, useIsManagedRepository } from './utils';
+import { getDynamicActions, renderActionElements } from './utils';
 
 export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
   const styles = useStyles2(getStyles);
@@ -25,7 +25,6 @@ export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
   const canStar = Boolean(meta.canStar);
   const isSnapshot = Boolean(meta.isSnapshot);
   const isShowingDashboard = !hasEditView && !isViewingPanel && !isEditingPanel;
-  const isManagedRepository = useIsManagedRepository(dashboard);
 
   const elements = renderActionElements(
     [
@@ -47,7 +46,7 @@ export const LeftActions = ({ dashboard }: { dashboard: DashboardScene }) => {
         key: 'managed-dashboard-badge',
         component: ManagedDashboardBadge,
         group: 'actions',
-        condition: isManagedRepository && canEdit,
+        condition: dashboard.isManaged() && canEdit,
       },
       {
         key: 'open-snapshot-origin-button',

public/app/features/dashboard-scene/scene/new-toolbar/actions/ManagedDashboardBadge.tsx

@@ -27,5 +27,5 @@ export const ManagedDashboardBadge = ({ dashboard }: ToolbarActionProps) => {
       break;
   }
 
-  return <Badge color="darkgrey" icon="exchange-alt" text={text} />;
+  return <Badge color="purple" icon="exchange-alt" tooltip={text} key="provisioned-dashboard-button-badge" />;
 };

public/app/features/dashboard-scene/scene/new-toolbar/actions/SaveDashboard.tsx

@@ -4,13 +4,12 @@ import { t, Trans } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 
 import { ToolbarActionProps } from '../types';
-import { useIsManagedRepository } from '../utils';
 
 export const SaveDashboard = ({ dashboard }: ToolbarActionProps) => {
   const { meta, isDirty, uid } = dashboard.state;
 
   const isNew = !Boolean(uid || dashboard.isManaged());
-  const isManagedRepository = useIsManagedRepository(dashboard);
+  const isManaged = dashboard.isManaged();
 
   // if we only can save
   if (isNew) {
@@ -28,7 +27,7 @@ export const SaveDashboard = ({ dashboard }: ToolbarActionProps) => {
   }
 
   // If we only can save as copy
-  if (contextSrv.hasEditPermissionInFolders && !meta.canSave && !meta.canMakeEditable && !isManagedRepository) {
+  if (contextSrv.hasEditPermissionInFolders && !meta.canSave && !meta.canMakeEditable && !isManaged) {
     return (
       <Button
         onClick={() => dashboard.openSaveDrawer({ saveAsCopy: true })}

public/app/features/dashboard-scene/scene/new-toolbar/utils.tsx

@@ -2,8 +2,6 @@ import { ReactNode } from 'react';
 
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
-import { selectFolderRepository } from 'app/features/provisioning/utils/selectors';
-import { useSelector } from 'app/types';
 
 import { DynamicDashNavButtonModel } from '../../utils/registerDynamicDashNavAction';
 import { DashboardScene } from '../DashboardScene';
@@ -54,9 +52,3 @@ export function getDynamicActions(
     return acc;
   }, []);
 }
-
-export function useIsManagedRepository(dashboard: DashboardScene): boolean {
-  const folderRepo = useSelector((state) => selectFolderRepository(state, dashboard.state.meta.folderUid));
-
-  return Boolean(dashboard.isManagedRepository() || folderRepo);
-}

public/locales/en-US/grafana.json

@@ -3137,7 +3137,6 @@
         "tooltip": "Share dashboard"
       },
       "share-button": "Share",
-      "switch-old-dashboard": "Switch to old dashboard page",
       "unlink-library-panel": "Unlink library panel",
       "unmark-favorite": "Unmark as favorite"
     },