Merge pull request #4169 from SherpasGroup/fix-disambiguation

Fix mgt disambiguation
microsoft-search · Dec 20, 2024 · 2688220 · 2688220
2 parents 3eb7ce1 + 2508afa
commit 2688220
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 11 deletions.
diff --git a/search-parts/src/components/DetailsListComponent.tsx b/search-parts/src/components/DetailsListComponent.tsx
@@ -416,7 +416,7 @@ export class DetailsListComponent extends React.Component<IDetailsListComponentP
 
                             if (this._templateContext.properties.useMicrosoftGraphToolkit && this.props.templateService.MgtCustomElementHelper.isDisambiguated) {
                               allStyles.forEach((style, index) => {
-                                allStyles[index] = style.replace(/mgt-/g, `${this.props.templateService.MgtCustomElementHelper.prefix}-`);
+                                allStyles[index] = this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(style);
                               });
                             }
 

diff --git a/search-parts/src/components/DocumentCardComponent.tsx b/search-parts/src/components/DocumentCardComponent.tsx
@@ -229,7 +229,7 @@ export class DocumentCardComponent extends React.Component<IDocumentCardComponen
                 </div>
                 <DocumentCardDetails>
                     {processedProps.location && !this.props.isCompact ?
-                        <div className={documentCardLocationClassNames.root} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.location) }}></div> : null
+                        <div className={documentCardLocationClassNames.root} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.location)) }}></div> : null
                     }
                     <Link
                         theme={this.props.themeVariant as ITheme}
@@ -249,7 +249,7 @@ export class DocumentCardComponent extends React.Component<IDocumentCardComponen
                         />
                     </Link>
                     {processedProps.tags && !this.props.isCompact ?
-                        <div className={documentCardLocationClassNames.root} style={{ whiteSpace: 'pre-line' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.tags) }}></div> : null
+                        <div className={documentCardLocationClassNames.root} style={{ whiteSpace: 'pre-line' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.tags)) }}></div> : null
                     }
                     {processedProps.author ?
                         <DocumentCardActivity

diff --git a/search-parts/src/components/PersonaComponent.tsx b/search-parts/src/components/PersonaComponent.tsx
@@ -188,16 +188,16 @@ export class PersonaComponent extends React.Component<IPersonaComponentProps, IP
                 return imageInitials ? <span>{imageInitials}</span> : <Icon iconName="Contact" />;
             },
             onRenderPrimaryText: (props: IPersonaProps) => {
-                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.primaryText) }}></div>;
+                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.primaryText)) }}></div>;
             },
             onRenderSecondaryText: (props: IPersonaProps) => {
-                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.secondaryText) }}></div>;
+                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.secondaryText)) }}></div>;
             },
             onRenderTertiaryText: (props: IPersonaProps) => {
-                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.tertiaryText) }}></div>;
+                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.tertiaryText)) }}></div>;
             },
             onRenderOptionalText: (props: IPersonaProps) => {
-                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(processedProps.optionalText) }}></div>;
+                return <div style={{ display: 'inline', whiteSpace: 'normal' }} dangerouslySetInnerHTML={{ __html: this._domPurify.sanitize(this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(processedProps.optionalText)) }}></div>;
             }
         };
 

diff --git a/search-parts/src/controls/TemplateRenderer/TemplateRenderer.tsx b/search-parts/src/controls/TemplateRenderer/TemplateRenderer.tsx
@@ -81,8 +81,6 @@ export class TemplateRenderer extends React.Component<ITemplateRendererProps, IT
 
             // Get <style> tags from Handlebars template content and prefix all CSS rules by the Web Part instance ID to isolate styles
             const styleElements = templateAsHtml.getElementsByTagName("style");
-            // let styles: string[] = [];
-            // debugger;
             const allStyles = [];
 
             if (styleElements.length > 0) {
@@ -110,7 +108,7 @@ export class TemplateRenderer extends React.Component<ITemplateRendererProps, IT
 
             if (this.props.templateContext.properties.useMicrosoftGraphToolkit && this.props.templateService.MgtCustomElementHelper.isDisambiguated) {
               allStyles.forEach((style, index) => {
-                allStyles[index] = style.replace(/mgt-/g, `${this.props.templateService.MgtCustomElementHelper.prefix}-`);
+                allStyles[index] = this.props.templateService.applyDisambiguatedMgtPrefixIfNeeded(style);
               });
             }
 

diff --git a/search-parts/src/services/templateService/ITemplateService.ts b/search-parts/src/services/templateService/ITemplateService.ts
@@ -24,4 +24,5 @@ export interface ITemplateService {
     registerResultTypes(resultTypes: IDataResultType[]): Promise<void>;
     replaceDisambiguatedMgtElementNames(template: Document): void;
     legacyStyleParser(style: HTMLStyleElement, elementPrefixId: string): string;
+    applyDisambiguatedMgtPrefixIfNeeded(elementName: string): string;
 }
diff --git a/search-parts/src/services/templateService/TemplateService.ts b/search-parts/src/services/templateService/TemplateService.ts
@@ -243,6 +243,12 @@ export class TemplateService implements ITemplateService {
       });
     }
 
+    public applyDisambiguatedMgtPrefixIfNeeded(elementName: string): string {
+        const prefix = this.MgtCustomElementHelper.prefix;
+        const regex = new RegExp(`mgt-(?!${prefix.slice(4)})`, 'g');
+        return elementName?.replace(regex, `${prefix}-`);
+    }
+
     /**
      * Gets the template HTML markup in the full template content
      * @param templateContent the full template content
@@ -1020,7 +1026,8 @@ export class TemplateService implements ITemplateService {
                 text = text.replace(/<c0\>/g, "<strong>").replace(/<\/c0\>/g, "</strong>").replace(/<ddd\/>/g, "&#8230;");
 
                 // We use Markdown here to render HTML and use web components
-                const rawHtml = this._markdownIt.render(text).replace(/\&lt;/g, '<').replace(/\&gt;/g, '>');
+                let rawHtml = this._markdownIt.render(text).replace(/\&lt;/g, '<').replace(/\&gt;/g, '>');
+                rawHtml = this.applyDisambiguatedMgtPrefixIfNeeded(rawHtml);
                 result.outputHtml = domPurify.sanitize(rawHtml);
                 result.didProcess = true;
             };