Fix for displaying string tags in summary pages

app/javascript/components/miq-structured-list/helpers.js

@@ -16,6 +16,10 @@ export const DynamicReactComponents = {
   MIQ_DATA_TABLE: MiqDataTable,
 };
 
+export const DOMPurifyModes = [
+  'miq_catalog_basic_information', // Service / Catalogs / Catalog items / Basic information.
+];
+
 const dataType = (data) => (data ? data.constructor.name.toString() : undefined);
 
 export const isObject = (item) => dataType(item) === 'Object';

app/javascript/components/miq-structured-list/index.jsx

@@ -7,6 +7,7 @@ import MiqStructuredListHeader from './miq-structured-list-header';
 import MiqStructuredListBody from './miq-structured-list-body/miq-structured-list-body';
 
 import { hasClickEvents } from './helpers';
+import MiqStructuredListModeContext from './miq-structuted-list-mode-context';
 
 /** Component to render the items in summary pages */
 const MiqStructuredList = ({
@@ -37,7 +38,9 @@ const MiqStructuredList = ({
   const accordionList = () => (
     <Accordion align="start" className={classNames('miq-structured-list-accordion', mode)}>
       <AccordionItem title={title} open>
-        {simpleList()}
+        <MiqStructuredListModeContext.Provider value={mode.split(' ')[1]}>
+          {simpleList()}
+        </MiqStructuredListModeContext.Provider>
       </AccordionItem>
     </Accordion>
   );

app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-text.jsx

@@ -1,14 +1,22 @@
-import React from 'react';
+/* eslint-disable react/no-danger */
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import DOMPurify from 'dompurify';
+import MiqStructuredListModeContext from '../../miq-structuted-list-mode-context';
+import { DOMPurifyModes } from '../../helpers';
 
 /** Component to print the text value inside a cell. */
 const MiqStructuredListText = ({ value }) => {
+  const mode = useContext(MiqStructuredListModeContext);
   const text = (value === null || value === undefined ? '' : String(value));
+  const purifyDom = DOMPurifyModes.includes(mode);
 
   return (
     <div className={classNames(text ? 'expand' : '', 'wrap_text')}>
-      {text}
+      {
+        purifyDom ? <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }} /> : text
+      }
     </div>
   );
 };

app/javascript/components/miq-structured-list/miq-structuted-list-mode-context.jsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+const MiqStructuredListModeContext = createContext();
+export default MiqStructuredListModeContext;