From 28c51cde3ae1000bf16b1513d00429ad7c10adc1 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Thu, 27 Jan 2022 09:11:57 +0200
Subject: [PATCH] Feature highlights: Highlight team group sync (#44477)

* Highlight team group sync

* Update text
---
 public/app/features/teams/TeamPages.tsx     | 13 +++++++++++-
 public/app/features/teams/state/navModel.ts | 22 +++++++++++++--------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx
index bf678eaa32e..400dc0079c5 100644
--- a/public/app/features/teams/TeamPages.tsx
+++ b/public/app/features/teams/TeamPages.tsx
@@ -15,6 +15,7 @@ import { contextSrv } from 'app/core/services/context_srv';
 import { NavModel } from '@grafana/data';
 import { featureEnabled } from '@grafana/runtime';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
+import { UpgradeBox } from 'app/core/components/Upgrade/UpgradeBox';
 
 interface TeamPageRouteParams {
   id: string;
@@ -127,7 +128,17 @@ export class TeamPages extends PureComponent<Props, State> {
       case PageTypes.Settings:
         return isSignedInUserTeamAdmin && <TeamSettings team={team!} />;
       case PageTypes.GroupSync:
-        return isSignedInUserTeamAdmin && isSyncEnabled && <TeamGroupSync />;
+        if (isSignedInUserTeamAdmin && isSyncEnabled) {
+          return <TeamGroupSync />;
+        } else if (config.featureHighlights.enabled) {
+          return (
+            <UpgradeBox
+              text={
+                "Team Sync immediately updates each user's Grafana teams and permissions based on their LDAP or Oauth group membership, instead of updating when users sign in."
+              }
+            />
+          );
+        }
     }
 
     return null;
diff --git a/public/app/features/teams/state/navModel.ts b/public/app/features/teams/state/navModel.ts
index 0e880e49022..b8560c41127 100644
--- a/public/app/features/teams/state/navModel.ts
+++ b/public/app/features/teams/state/navModel.ts
@@ -1,9 +1,11 @@
 import { Team, TeamPermissionLevel } from 'app/types';
 import { featureEnabled } from '@grafana/runtime';
 import { NavModelItem, NavModel } from '@grafana/data';
+import config from 'app/core/config';
+import { ProBadge } from 'app/core/components/Upgrade/ProBadge';
 
 export function buildNavModel(team: Team): NavModelItem {
-  const navModel = {
+  const navModel: NavModelItem = {
     img: team.avatarUrl,
     id: 'team-' + team.id,
     subTitle: 'Manage members and settings',
@@ -28,14 +30,18 @@ export function buildNavModel(team: Team): NavModelItem {
     ],
   };
 
+  const teamGroupSync = {
+    active: false,
+    icon: 'sync',
+    id: `team-groupsync-${team.id}`,
+    text: 'External group sync',
+    url: `org/teams/edit/${team.id}/groupsync`,
+  };
+
   if (featureEnabled('teamsync')) {
-    navModel.children.push({
-      active: false,
-      icon: 'sync',
-      id: `team-groupsync-${team.id}`,
-      text: 'External group sync',
-      url: `org/teams/edit/${team.id}/groupsync`,
-    });
+    navModel.children!.push(teamGroupSync);
+  } else if (config.featureHighlights.enabled) {
+    navModel.children!.push({ ...teamGroupSync, tabSuffix: ProBadge });
   }
 
   return navModel;