FIx "<>&" UI errors

frontend/ee/components/UsersPage/UsersTable.jsx

@@ -9,6 +9,10 @@ import { Tooltip } from 'react-tooltip';
 import UsersActionMenu from './UsersActionMenu';
 import { humanizeifDefaultGroupName } from '@/_helpers/utils';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 const UsersTable = ({
   isLoading,
   users,
@@ -94,7 +98,7 @@ const UsersTable = ({
                           className="mx-3 tj-text tj-text-sm"
                           data-cy={`${user.name.toLowerCase().replace(/\s+/g, '-')}-user-name`}
                         >
-                          {user.name}
+                          {decodeEntities(user.name)}
                         </span>
                       </td>
                       <td className="text-muted">

frontend/src/Editor/AppVersionsManager/AppVersionsManager.jsx

@@ -7,6 +7,10 @@ import { shallow } from 'zustand/shallow';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { useEditorStore } from '@/_stores/editorStore';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 const appVersionLoadingStatus = Object.freeze({
   loading: 'loading',
   loaded: 'loaded',
@@ -80,7 +84,7 @@ export const AppVersionsManager = function ({
       .del(appId, versionId)
       .then(() => {
         toast.dismiss(deleteingToastId);
-        toast.success(`Version - ${versionName} Deleted`);
+        toast.success(`Version - ${decodeEntities(versionName)} Deleted`);
         resetDeleteModal();
         setGetAppVersionStatus(appVersionLoadingStatus.loading);
       })
@@ -111,7 +115,7 @@ export const AppVersionsManager = function ({
             })}
             style={{ maxWidth: '100%' }}
           >
-            {appVersion.name}
+            {decodeEntities(appVersion.name)}
           </div>
         </div>
         {isEditable && appVersion.id !== releasedVersionId && (

frontend/src/Editor/AppVersionsManager/CustomSelect.jsx

@@ -7,6 +7,10 @@ import { CreateVersion } from './CreateVersionModal';
 import { ConfirmDialog } from '@/_components';
 import { defaultAppEnvironments } from '@/_helpers/utils';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 export const Menu = (props) => {
   const isEditable = props.selectProps.isEditable;
   return (
@@ -19,7 +23,7 @@ export const Menu = (props) => {
         >
           <div className="row" style={{ padding: '8px 12px' }}>
             <div className="col-10 text-truncate tj-text-xsm color-slate12">
-              {props?.selectProps?.value?.appVersionName}
+              {props?.selectProps?.value?.appVersionName && decodeEntities(props?.selectProps?.value?.appVersionName)}
             </div>
             {isEditable && !props?.selectProps?.value?.isReleasedVersion && (
               <div className="col-1">
@@ -103,7 +107,7 @@ export const SingleValue = ({ selectProps }) => {
         className={cx('app-version-name text-truncate', { 'color-light-green': selectProps.value.isReleasedVersion })}
         data-cy={`${selectProps.value?.appVersionName}-current-version-text`}
       >
-        {selectProps.value?.appVersionName}
+        {selectProps.value?.appVersionName && decodeEntities(selectProps.value?.appVersionName)}
       </div>
     </div>
   );
@@ -134,7 +138,7 @@ export const CustomSelect = ({ ...props }) => {
           defaultAppEnvironments.length > 1
             ? 'Deleting a version will permanently remove it from all environments.'
             : ''
-        }Are you sure you want to delete this version - ${deleteVersion.versionName}?`}
+        }Are you sure you want to delete this version - ${decodeEntities(deleteVersion.versionName)}?`}
         onConfirm={() => deleteAppVersion(deleteVersion.versionId, deleteVersion.versionName)}
         onCancel={resetDeleteModal}
       />

frontend/src/Editor/DataSourceManager/DataSourceManager.jsx

@@ -31,7 +31,7 @@ import './dataSourceManager.theme.scss';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 
 function decodeEntities(encodedString) {
-  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 }
 
 class DataSourceManagerComponent extends React.Component {

frontend/src/Editor/QueryManager/Components/ChangeDataSource.jsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import Select from '@/_ui/Select';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 export const ChangeDataSource = ({ dataSources, onChange, value }) => {
   return (
     <Select
       className="w-100"
-      options={dataSources.map((ds) => ({ label: ds.name, value: ds.id }))}
+      options={dataSources.map((ds) => ({ label: decodeEntities(ds.name), value: ds.id }))}
       value={value?.id}
       onChange={(value) => {
         const dataSource = dataSources.find((ds) => ds.id === value);

frontend/src/Editor/QueryManager/Components/DataSourcePicker.jsx

@@ -16,6 +16,10 @@ import { authenticationService } from '@/_services';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import '../queryManager.theme.scss';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 function DataSourcePicker({ dataSources, sampleDataSource, staticDataSources, darkMode, globalDataSources }) {
   const allUserDefinedSources = [...dataSources, ...globalDataSources];
   const [searchTerm, setSearchTerm] = useState();
@@ -178,7 +182,7 @@ function DataSourcePicker({ dataSources, sampleDataSource, staticDataSources, da
                     data-cy={`${String(source.name).toLowerCase().replace(/\s+/g, '-')}-add-query-card`}
                   >
                     <DataSourceIcon source={source} height={14} styles={{ minWidth: 14 }} />
-                    <span className="text-truncate">{source.name}</span>
+                    <span className="text-truncate">{decodeEntities(source.name)}</span>
                     <Tooltip id="tooltip-for-query-panel-ds-picker-btn" className="tooltip" />
                   </ButtonSolid>
                 </Col>

frontend/src/Editor/QueryManager/Components/DataSourceSelect.jsx

@@ -18,7 +18,7 @@ import './../queryManager.theme.scss';
 import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
 
 function decodeEntities(encodedString) {
-  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 }
 
 function DataSourceSelect({ isDisabled, selectRef, closePopup }) {

frontend/src/Editor/QueryManager/Components/QueryManagerHeader.jsx

@@ -25,7 +25,7 @@ import { cloneDeep } from 'lodash';
 import ParameterList from './ParameterList';
 
 function decodeEntities(encodedString) {
-  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 }
 
 export const QueryManagerHeader = forwardRef(({ darkMode, options, editorRef, setOptions }, ref) => {

frontend/src/Editor/QueryPanel/QueryCard.jsx

@@ -12,7 +12,7 @@ import DataSourceIcon from '../QueryManager/Components/DataSourceIcon';
 import { isQueryRunnable } from '@/_helpers/utils';
 
 function decodeEntities(encodedString) {
-  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 }
 
 export const QueryCard = ({ dataQuery, darkMode = false, editorRef, appId }) => {

frontend/src/GlobalDatasources/LIstItem/index.jsx

@@ -9,7 +9,7 @@ import { ToolTip } from '@/_components';
 import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
 
 function decodeEntities(encodedString) {
-  return encodedString.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 }
 
 export const ListItem = ({

frontend/src/HomePage/AppCard.jsx

@@ -15,6 +15,10 @@ import { getPrivateRoute, getSubpath } from '@/_helpers/routes';
 import { validateName } from '@/_helpers/utils';
 const { defaultIcon } = configs;
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 export default function AppCard({
   app,
   canCreateApp,
@@ -104,7 +108,7 @@ export default function AppCard({
               className="app-card-name font-weight-500 tj-text-md"
               data-cy={`${app.name.toLowerCase().replace(/\s+/g, '-')}-title`}
             >
-              {app.name}
+              {decodeEntities(app.name)}
             </h3>
           </ToolTip>
         </div>

frontend/src/SettingsPage/SettingsPage.jsx

@@ -6,6 +6,10 @@ import Layout from '@/_ui/Layout';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { BreadCrumbContext } from '@/App/App';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 function SettingsPage(props) {
   const currentSession = authenticationService.currentSessionValue;
   const email = currentSession?.current_user.email;
@@ -161,7 +165,7 @@ function SettingsPage(props) {
                           className="form-control"
                           name="first-name"
                           placeholder={'Enter full name'}
-                          value={fullName}
+                          value={decodeEntities(fullName)}
                           onChange={(event) => setFullName(event.target.value)}
                           autoComplete="off"
                           data-cy="name-input-field"

frontend/src/_components/OrganizationManager/CustomSelect.jsx

@@ -8,6 +8,10 @@ import { authenticationService } from '@/_services';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { ToolTip } from '@/_components';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 const Menu = (props) => {
   const { t } = useTranslation();
   const { admin } = authenticationService.currentSessionValue;
@@ -56,7 +60,7 @@ const SingleValue = ({ selectProps }) => {
     <ToolTip message={selectProps?.value?.name}>
       <div className="d-inline-flex align-items-center">
         <div data-cy="workspace-name" className="tj-text-xsm">
-          {selectProps.value.name}
+          {decodeEntities(selectProps.value.name)}
         </div>
       </div>
     </ToolTip>

frontend/src/_components/OrganizationManager/List.jsx

@@ -5,6 +5,10 @@ import { getAvatar } from '@/_helpers/utils';
 import { appendWorkspaceId, getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
 import { ToolTip } from '@/_components';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 export const OrganizationList = function () {
   const { current_organization_id } = authenticationService.currentSessionValue;
   const [organizationList, setOrganizationList] = useState([]);
@@ -44,7 +48,7 @@ export const OrganizationList = function () {
         </div>
         <ToolTip message={org.name} placement="right">
           <div className="org-name" data-cy={`${String(org.name).toLowerCase().replace(/\s+/g, '-')}-name-selector`}>
-            {org.name}
+            {decodeEntities(org.name)}
           </div>
         </ToolTip>
       </div>

frontend/src/_ui/Breadcrumbs/index.jsx

@@ -4,6 +4,10 @@ import SolidIcon from '../Icon/SolidIcons';
 import { BreadCrumbContext } from '../../App/App';
 import useBreadcrumbs from 'use-react-router-breadcrumbs';
 
+function decodeEntities(encodedString) {
+  return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
+}
+
 export const Breadcrumbs = ({ darkMode, dataCy }) => {
   const { sidebarNav } = useContext(BreadCrumbContext);
   const breadcrumbs = useBreadcrumbs(routes, { excludePaths: ['/'] });
@@ -20,7 +24,7 @@ export const Breadcrumbs = ({ darkMode, dataCy }) => {
               {sidebarNav?.length > 0 && <SolidIcon name="cheveronright" fill={darkMode ? '#FDFDFE' : '#131620'} />}
               <li className="breadcrumb-item font-weight-500" data-cy="breadcrumb-page-title">
                 {' '}
-                {sidebarNav}
+                {sidebarNav && decodeEntities(sidebarNav)}
               </li>
               {beta && <span className="badge bg-color-primary mx-3">beta</span>}
             </div>