Merge pull request #3772 from SherpasGroup/vertical-audiences

Add audience targeting to verticals
microsoft-search · Jun 9, 2024 · d39cabc · d39cabc
2 parents a472f38 + 21b9094
commit d39cabc
Show file tree

Hide file tree

Showing 20 changed files with 10,264 additions and 5,965 deletions.
diff --git a/docs/usage/search-verticals/index.md b/docs/usage/search-verticals/index.md
@@ -22,4 +22,5 @@ The options for a vertical are as follow:
 | **Is hyperlink** | If checked, the tab will behave as an hyperlink meaning it won't trigger any selected event.
 | **Link URL** | If the tab is an hyperlink, the link URL to use. Tokens `{<TokenName>}` are supported here. See [tokens](../search-results/tokens.md) for more info.
 | **Open behavior** | If the tab is an hyperlink, the opening behavior (new tab or current tab).
-| **Show link icon** |  If the tab is an hyperlink, display or hide an icon next to the tab name indicating the tab is a link (same page or external).
+| **Show link icon** |  If the tab is an hyperlink, display or hide an icon next to the tab name indicating the tab is a link (same page or external).
+| **Audience** |  Groups that this vertical will be visible to. If left empty the vertical will be visible for all users.
diff --git a/search-parts/config/package-solution.json b/search-parts/config/package-solution.json
@@ -63,6 +63,10 @@
             {
                 "resource": "Microsoft Graph",
                 "scope": "Acronym.Read.All"
+            },
+            {
+              "resource": "Microsoft Graph",
+              "scope": "GroupMember.Read.All"
             }
         ],
         "metadata": {

diff --git a/search-parts/package-lock.json b/search-parts/package-lock.json
diff --git a/search-parts/package.json b/search-parts/package.json
@@ -17,9 +17,10 @@
         "@fluentui/react-file-type-icons": "8.11.3",
         "@fluentui/react-theme-provider": "0.19.16",
         "@iconify/react": "^4.1.1",
-        "@microsoft/mgt-components": "4.1.0",
-        "@microsoft/mgt-element": "4.1.0",
-        "@microsoft/mgt-sharepoint-provider": "4.1.0",
+        "@microsoft/mgt-components": "4.2.1",
+        "@microsoft/mgt-element": "4.2.1",
+        "@microsoft/mgt-react": "4.2.1",
+        "@microsoft/mgt-sharepoint-provider": "4.2.1",
         "@microsoft/sp-adaptive-card-extension-base": "1.18.2",
         "@microsoft/sp-component-base": "1.18.2",
         "@microsoft/sp-core-library": "1.18.2",

diff --git a/search-parts/src/helpers/GraphToolKitHelper.ts b/search-parts/src/helpers/GraphToolKitHelper.ts
@@ -20,7 +20,7 @@ export const loadMsGraphToolkit = async (context: WebPartContext) => {
 
         const { registerMgtComponents } = await import(
           /* webpackChunkName: 'microsoft-graph-toolkit' */
-          '@microsoft/mgt-components/dist/es6'
+          '@microsoft/mgt-components/dist/es6/registerMgtComponents'
         );
 
         if (!Providers.globalProvider) {

diff --git a/search-parts/src/models/common/IDataVerticalConfiguration.ts b/search-parts/src/models/common/IDataVerticalConfiguration.ts
@@ -40,4 +40,9 @@ export interface IDataVerticalConfiguration {
      * The Fluent UI icon name
      */
     iconName?: string;
+
+    /**
+     * Audience for the vertical
+     */
+    audience?: any[];
 }
diff --git a/search-parts/src/webparts/searchResults/SearchResultsWebPart.ts b/search-parts/src/webparts/searchResults/SearchResultsWebPart.ts
@@ -410,7 +410,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
             const parentControlZone = this.getParentControlZone();
 
             // If the current selected vertical is not the one configured for this Web Part, we show nothing
-            if (verticalData && this.properties.selectedVerticalKeys.indexOf(verticalData.selectedVertical.key) === -1) {
+            if (verticalData && this.properties.selectedVerticalKeys.indexOf(verticalData.selectedVertical?.key) === -1) {
 
                 if (this.displayMode === DisplayMode.Edit) {
 
@@ -2550,7 +2550,7 @@ export default class SearchResultsWebPart extends BaseWebPart<ISearchResultsWebP
             const verticalData = DynamicPropertyHelper.tryGetValueSafe(this._verticalsConnectionSourceData);
 
             // For edit mode only, we want to see the data
-            if (verticalData && this.properties.selectedVerticalKeys.indexOf(verticalData.selectedVertical.key) === -1 && this.displayMode === DisplayMode.Read) {
+            if (verticalData && this.properties.selectedVerticalKeys.indexOf(verticalData.selectedVertical?.key) === -1 && this.displayMode === DisplayMode.Read) {
 
                 // If the current selected vertical is not the one configured for this Web Part, we reset
                 // the data soure information since we don't want to expose them to consumers

diff --git a/search-parts/src/webparts/searchVerticals/SearchVerticalsWebPart.ts b/search-parts/src/webparts/searchVerticals/SearchVerticalsWebPart.ts
@@ -23,6 +23,15 @@ import { PageOpenBehavior } from '../../helpers/UrlHelper';
 import { IDataVerticalConfiguration } from '../../models/common/IDataVerticalConfiguration';
 import commonStyles from '../../styles/Common.module.scss';
 import PnPTelemetry from '@pnp/telemetry-js';
+import type { IDynamicPerson } from '@microsoft/mgt-react';
+import { MSGraphClientFactory } from '@microsoft/sp-http';
+import { loadMsGraphToolkit } from '../../helpers/GraphToolKitHelper';
+import { LocalizationHelper } from "@microsoft/mgt-element/dist/es6/utils/LocalizationHelper";
+
+const PeoplePicker = React.lazy(() => 
+	import(/* webpackChunkName: 'microsoft-graph-toolkit' */ '@microsoft/mgt-react/dist/es6/generated/people-picker')
+		.then(({ PeoplePicker }) => ({ default: PeoplePicker }))
+);
 
 const LogSource = "SearchVerticalsWebPart";
 
@@ -46,6 +55,8 @@ export default class DataVerticalsWebPart extends BaseWebPart<ISearchVerticalsWe
      */
     private tokenService: ITokenService;
 
+    private _memberGroups: any;
+
     public constructor() {
         super();
 
@@ -61,6 +72,8 @@ export default class DataVerticalsWebPart extends BaseWebPart<ISearchVerticalsWe
             Log.warn(LogSource, `Opt out for PnP Telemetry failed. Details: ${error}`, this.context.serviceScope);
         }
 
+        loadMsGraphToolkit(this.context);
+
         // Initializes Web Part properties
         this.initializeProperties();
 
@@ -80,6 +93,10 @@ export default class DataVerticalsWebPart extends BaseWebPart<ISearchVerticalsWe
             );
             this._placeholderComponent = Placeholder;
         }
+
+        const msGraphClientFactory = this.context.serviceScope.consume<MSGraphClientFactory>(MSGraphClientFactory.serviceKey);
+        const msGraphClient = await msGraphClientFactory.getClient('3');
+        this._memberGroups = await msGraphClient.api("https://graph.microsoft.com/v1.0/me/getMemberGroups").post({securityEnabledOnly: false});
     }
 
     public render(): void {
@@ -126,7 +143,9 @@ export default class DataVerticalsWebPart extends BaseWebPart<ISearchVerticalsWe
             renderRootElement = React.createElement(
                 SearchVerticalsContainer,
                 {
-                    verticals: this.properties.verticals,
+                    verticals: this.properties.verticals.filter(v => !v.audience || v.audience.length === 0 || v.audience.some(audienceId => {
+                      return this._memberGroups.value.includes(audienceId);
+                    })),
                     webPartTitleProps: {
                         displayMode: this.displayMode,
                         title: this.properties.title,
@@ -369,6 +388,38 @@ export default class DataVerticalsWebPart extends BaseWebPart<ISearchVerticalsWe
                         },
                         required: false
                     },
+                    {
+                        id: 'audience',
+                        title: webPartStrings.PropertyPane.Verticals.Fields.Audience,
+                        type: this._customCollectionFieldType.custom,
+                        onCustomRender: (field, value, onUpdate, item, itemId) => {
+                          const onSelectionChanged = (e: CustomEvent<IDynamicPerson[]>) => {
+                            console.log(e.detail);
+                            onUpdate(field.id, e.detail.map(p => p.id));
+                          };
+                          LocalizationHelper.strings = {
+                            _components: {
+                              "pnp-modern-search-people-picker": {
+                                inputPlaceholderText: webPartStrings.PropertyPane.Verticals.AudienceInputPlaceholderText,
+                                noResultsFound: webPartStrings.PropertyPane.Verticals.AudienceNoResultsFound,
+                                loading: webPartStrings.PropertyPane.Verticals.AudienceLoading
+                              }
+                            }
+                          };
+                          return (
+                            React.createElement("div", null,
+                              React.createElement(React.Suspense, { fallback: React.createElement("div", null, webPartStrings.PropertyPane.Verticals.AudienceLoading) },
+                                React.createElement(PeoplePicker, {
+                                  defaultSelectedGroupIds: item.audience || [],
+                                  selectionMode: "multiple",
+                                  type: "group",
+                                  selectionChanged: onSelectionChanged,
+                                })
+                              )
+                            )
+                          )
+                        }
+                    }
                 ]
             }),
             PropertyPaneTextField('defaultVerticalQueryStringParam', {

diff --git a/search-parts/src/webparts/searchVerticals/loc/da-dk.js b/search-parts/src/webparts/searchVerticals/loc/da-dk.js
@@ -16,6 +16,8 @@ define([], function() {
         PanelHeader: "Konfigurér datavertikaler",
         PanelDescription: "Tilføj en ny vertikal for at give brugere mulighed for søge i en predefineret datakilde eller scope.",
         ButtonLabel: "Konfigurér vertikaler",
+        DefaultVerticalQueryStringParamLabel: "Query-strengparameter til brug for at vælge en vertikal fane som standard",
+        DefaultVerticalQueryStringParamDescription: "Matchningen vil blive udført mod fane-navnet eller den aktuelle side-URL (hvis fanen er et hyperlink)",
         Fields: {
           TabName: "Navn på fane",
           IconName: "Fluent UI ikonnavn",
@@ -24,7 +26,11 @@ define([], function() {
           OpenBehavior: "Åben adfærd",
           TabValue: "Tab-værdi",
           ShowLinkIcon: "Vis linkikon",
-        }
+          Audience: "Målgruppe"
+        },
+        AudienceInputPlaceholderText: "Søg efter en gruppe",
+        AudienceNoResultsFound: "Vi fandt ingen matchende grupper.",
+        AudienceLoading: "Indlæser grupper..."
       }
     }
   }

diff --git a/search-parts/src/webparts/searchVerticals/loc/de-de.js b/search-parts/src/webparts/searchVerticals/loc/de-de.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "Ist-Hyperlink",
             LinkUrl: "Link URL",
             ShowLinkIcon: "Zeige Link Icon",
-            OpenBehavior: "Öffnungsverhalten"
-          }
+            OpenBehavior: "Öffnungsverhalten",
+            Audience: "Zielgruppe"
+          },
+          AudienceInputPlaceholderText: "Suche nach einer Gruppe",
+          AudienceNoResultsFound: "Wir haben keine passenden Gruppen gefunden.",
+          AudienceLoading: "Lade Gruppen..."
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/en-us.js b/search-parts/src/webparts/searchVerticals/loc/en-us.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "Is hyperlink",
             LinkUrl: "Link URL",
             ShowLinkIcon: "Show link icon",
-            OpenBehavior: "Open behavior"
-          }
+            OpenBehavior: "Open behavior",
+            Audience: "Audience"
+          },
+          AudienceInputPlaceholderText: "Search for a group",
+          AudienceNoResultsFound: "We didn't find any matching groups.",
+          AudienceLoading: "Loading groups..."          
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/es-es.js b/search-parts/src/webparts/searchVerticals/loc/es-es.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "Es un hipervínculo",
             LinkUrl: "Enlace URL",
             ShowLinkIcon: "Mostrar icono de enlace",
-            OpenBehavior: "Comportamiento de apertura"
-          }
+            OpenBehavior: "Comportamiento de apertura",
+            Audience: "Público objetivo"
+          },
+          AudienceInputPlaceholderText: "Buscar un grupo",
+          AudienceNoResultsFound: "No encontramos ningún grupo coincidente.",
+          AudienceLoading: "Cargando grupos..."
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/fi-fi.js b/search-parts/src/webparts/searchVerticals/loc/fi-fi.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "On linkki",
             LinkUrl: "Linkin URL",
             ShowLinkIcon: "Näytä linkin ikoni",
-            OpenBehavior: "Linkin avausmuoto"
-          }
+            OpenBehavior: "Linkin avausmuoto",
+            Audience: "Kohdeyleisö"
+          },
+          AudienceInputPlaceholderText: "Hae ryhmää",
+          AudienceNoResultsFound: "Yhtään vastaavaa ryhmää ei löytynyt.",
+          AudienceLoading: "Ladataan ryhmiä..."
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/fr-fr.js b/search-parts/src/webparts/searchVerticals/loc/fr-fr.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "Est un hyperlien",
             LinkUrl: "URL du lien",
             ShowLinkIcon: "Afficher l'icône de lien",
-            OpenBehavior: "Comportement à l'ouverture"
-          }
+            OpenBehavior: "Comportement à l'ouverture",
+            Audience: "Audience"
+          },
+          AudienceInputPlaceholderText: "Rechercher un groupe",
+          AudienceNoResultsFound: "Nous n'avons trouvé aucun groupe correspondant.",
+          AudienceLoading: "Chargement des groupes..."
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/mystrings.d.ts b/search-parts/src/webparts/searchVerticals/loc/mystrings.d.ts
@@ -25,7 +25,11 @@ declare interface ISearchVerticalsWebPartStrings {
         LinkUrl: string;
         ShowLinkIcon: string;
         OpenBehavior: string;
-      }
+        Audience: string;
+      },
+      AudienceInputPlaceholderText: string;
+      AudienceNoResultsFound: string;
+      AudienceLoading: string;
     }
   }
 }

diff --git a/search-parts/src/webparts/searchVerticals/loc/nb-no.js b/search-parts/src/webparts/searchVerticals/loc/nb-no.js
@@ -16,6 +16,8 @@ define([], function() {
                 PanelHeader: "Konfigurer vertikaler",
                 PanelDescription: "Legg til ny vertikal som lar brukerne søke i en predefinert avgrensning eller datakilde.",
                 ButtonLabel: "Konfigurer vertikaler",
+                DefaultVerticalQueryStringParamLabel: "Spørringsstrengparameter for å velge en vertikal fane som standard",
+                DefaultVerticalQueryStringParamDescription: "Sammenligningen vil bli utført mot fane-navnet eller gjeldende side-URL (hvis fanen er en hyperkobling)",
                 Fields: {
                     TabName: "Fane",
                     IconName: "Fluent UI ikonnavn",
@@ -24,7 +26,11 @@ define([], function() {
                     OpenBehavior: "Åpningsbodus",
                     TabValue: "Tab-verdi",
                     ShowLinkIcon: "Vis lenkeikon",
-                }
+                    Audience: "Målgruppe"
+                },
+                AudienceInputPlaceholderText: "Søk etter en gruppe",
+                AudienceNoResultsFound: "Vi fant ingen matchende grupper.",
+                AudienceLoading: "Laster grupper..."
             }
         }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/nl-nl.js b/search-parts/src/webparts/searchVerticals/loc/nl-nl.js
@@ -16,6 +16,8 @@ define([], function() {
                 PanelHeader: "Configureer zoekverticalen",
                 PanelDescription: "Voeg nieuwe zoekverticalen toe zodat gebruikers kunnen zoeken in een voorgedefinieerde scope of databron.",
                 ButtonLabel: "Configureer zoekverticalen",
+                DefaultVerticalQueryStringParamLabel: "Querystring-parameter om te gebruiken om standaard een verticale tab te selecteren",
+                DefaultVerticalQueryStringParamDescription: "De overeenkomst wordt gemaakt met de tabnaam of de huidige paginakoppeling (als de tab een hyperlink is)",
                 Fields: {
                     TabName: "Tab naam",
                     IconName: "Fluent UI icoon naam",
@@ -24,7 +26,11 @@ define([], function() {
                     OpenBehavior: "Gedrag bij openen",
                     TabValue: "Tabwaarde",
                     ShowLinkIcon: "Toon linkpictogram",
-                }
+                    Audience: "Doelgroep"
+                },
+                AudienceInputPlaceholderText: "Zoek naar een groep",
+                AudienceNoResultsFound: "We hebben geen overeenkomende groepen gevonden.",
+                AudienceLoading: "Groepen laden..."
             }
         }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/pl-pl.js b/search-parts/src/webparts/searchVerticals/loc/pl-pl.js
@@ -16,6 +16,8 @@ define([], function() {
                     PanelHeader: "Konfiguruj wertykały",
                     PanelDescription: "Dodaj nowy wertykał aby umożliwić wyszukiwanie w zadanym zakresie lub źródle.",
                     ButtonLabel: "Konfiguruj wertykały",
+                    DefaultVerticalQueryStringParamLabel: "Parametr ciągu zapytań do użycia do wybrania zakładki wertykalnej domyślnie",
+                    DefaultVerticalQueryStringParamDescription: "Dopasowanie zostanie wykonane do nazwy karty lub bieżącego adresu URL strony (jeśli karta jest hiperłączem)",
                     Fields: {
                         TabName: "Nazwa karty",
                         IconName: "Nazwa ikony Fluent UI",
@@ -24,7 +26,11 @@ define([], function() {
                         OpenBehavior: "Sposób otwierania",
                         TabValue: "Wartość tabulatora",
                         ShowLinkIcon: "Pokaż ikonę linku",
-                }
+                        Audience: "Odbiorcy"
+                },
+                AudienceInputPlaceholderText: "Wyszukaj grupę",
+                AudienceNoResultsFound: "Nie znaleźliśmy pasujących grup.",
+                AudienceLoading: "Ładowanie grup..."
             }
         }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/pt-br.js b/search-parts/src/webparts/searchVerticals/loc/pt-br.js
@@ -25,8 +25,12 @@ define([], function() {
             IsLink: "É um link",
             LinkUrl: "URL do link",
             ShowLinkIcon: "Mostrar ícone do link",
-            OpenBehavior: "Comportamento de abertura"
-          }
+            OpenBehavior: "Comportamento de abertura",
+            Audience: "Público-alvo"
+          },
+          AudienceInputPlaceholderText: "Pesquisar por um grupo",
+          AudienceNoResultsFound: "Não encontramos nenhum grupo correspondente.",
+          AudienceLoading: "Carregando grupos..."
         }
       }
     }

diff --git a/search-parts/src/webparts/searchVerticals/loc/sv-SE.js b/search-parts/src/webparts/searchVerticals/loc/sv-SE.js
@@ -16,6 +16,8 @@ define([], function() {
                 PanelHeader: "Konfigurera vertikala data",
                 PanelDescription: "Lägg till en ny vertikal så att användare kan söka i en fördefinierad datakälla eller omfattning.",
                 ButtonLabel: "Konfigurera",
+                DefaultVerticalQueryStringParamLabel: "Frågesträngsparameter att använda för att välja en vertikal flik som standard",
+                DefaultVerticalQueryStringParamDescription: "Matchningen kommer att göras mot fliknamnet eller den aktuella sidans URL (om fliken är en hyperlänk)",
                 Fields: {
                     TabName: "Fliknamn",
                     IconName: "Fluent UI Fabric ikonnamn",
@@ -24,7 +26,11 @@ define([], function() {
                     OpenBehavior: "Öppningsbeteende",
                     TabValue: "Tab-värde",
                     ShowLinkIcon: "Visa länkikon",
-                }
+                    Audience: "Målgrupp"
+                },
+                AudienceInputPlaceholderText: "Sök efter en grupp",
+                AudienceNoResultsFound: "Vi hittade inga matchande grupper.",
+                AudienceLoading: "Laddar grupper..."
             }
         }
     }