FIx "<>&" UI errors

frontend/ee/components/UsersPage/UsersTable.jsx

@@ -8,6 +8,7 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { Tooltip } from 'react-tooltip';
 import UsersActionMenu from './UsersActionMenu';
 import { humanizeifDefaultGroupName } from '@/_helpers/utils';
+import { decodeEntities } from '@/_helpers/utils';
 
 const UsersTable = ({
  isLoading,
@@ -94,7 +95,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

@@ -6,6 +6,7 @@ import { toast } from 'react-hot-toast';
 import { shallow } from 'zustand/shallow';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { useEditorStore } from '@/_stores/editorStore';
+import { decodeEntities } from '@/_helpers/utils';
 
 const appVersionLoadingStatus = Object.freeze({
  loading: 'loading',
@@ -80,7 +81,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 +112,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

@@ -5,7 +5,7 @@ import { components } from 'react-select';
 import { EditVersion } from './EditVersionModal';
 import { CreateVersion } from './CreateVersionModal';
 import { ConfirmDialog } from '@/_components';
-import { defaultAppEnvironments } from '@/_helpers/utils';
+import { defaultAppEnvironments, decodeEntities } from '@/_helpers/utils';
 
 export const Menu = (props) => {
  const isEditable = props.selectProps.isEditable;
@@ -19,7 +19,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 +103,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 +134,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

@@ -5,7 +5,7 @@ import { Modal, Button, Tab, Row, Col, ListGroup } from 'react-bootstrap';
 import { toast } from 'react-hot-toast';
 import { getSvgIcon } from '@/_helpers/appUtils';
 import { TestConnection } from './TestConnection';
-import { getWorkspaceId, deepEqual } from '@/_helpers/utils';
+import { getWorkspaceId, deepEqual, decodeEntities } from '@/_helpers/utils';
 import {
  DataBaseSources,
  ApiSources,
@@ -30,10 +30,6 @@ import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
 import './dataSourceManager.theme.scss';
 import { useAppVersionStore } from '@/_stores/appVersionStore';
 
-function decodeEntities(encodedString) {
- return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
-}
-
 class DataSourceManagerComponent extends React.Component {
  constructor(props) {
  super(props);

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

@@ -1,11 +1,12 @@
 import React from 'react';
 import Select from '@/_ui/Select';
+import { decodeEntities } from '@/_helpers/utils';
 
 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

@@ -3,7 +3,7 @@ import Plus from '@/_ui/Icon/solidIcons/Plus';
 import Information from '@/_ui/Icon/solidIcons/Information';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { getWorkspaceId } from '@/_helpers/utils';
+import { getWorkspaceId, decodeEntities } from '@/_helpers/utils';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { SearchBox as SearchBox2 } from '@/_components/SearchBox';
 import DataSourceIcon from './DataSourceIcon';
@@ -178,7 +178,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

@@ -4,7 +4,7 @@ import { groupBy, isEmpty } from 'lodash';
 import { useNavigate } from 'react-router-dom';
 import DataSourceIcon from './DataSourceIcon';
 import { authenticationService } from '@/_services';
-import { getWorkspaceId } from '@/_helpers/utils';
+import { getWorkspaceId, decodeEntities } from '@/_helpers/utils';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { useDataSources, useGlobalDataSources, useSampleDataSource } from '@/_stores/dataSourcesStore';
 import { useDataQueriesActions } from '@/_stores/dataQueriesStore';
@@ -17,10 +17,6 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import './../queryManager.theme.scss';
 import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
 
-function decodeEntities(encodedString) {
- return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
-}
-
 function DataSourceSelect({ isDisabled, selectRef, closePopup }) {
  const dataSources = useDataSources();
  const globalDataSources = useGlobalDataSources();

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

@@ -23,10 +23,7 @@ import { Button } from 'react-bootstrap';
 import { cloneDeep } from 'lodash';
 
 import ParameterList from './ParameterList';
-
-function decodeEntities(encodedString) {
- return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
-}
+import { decodeEntities } from '@/_helpers/utils';
 
 export const QueryManagerHeader = forwardRef(({ darkMode, options, editorRef, setOptions }, ref) => {
  const { renameQuery } = useDataQueriesActions();

frontend/src/Editor/QueryPanel/QueryCard.jsx

@@ -9,11 +9,7 @@ import { useAppVersionStore } from '@/_stores/appVersionStore';
 import { shallow } from 'zustand/shallow';
 import Copy from '@/_ui/Icon/solidIcons/Copy';
 import DataSourceIcon from '../QueryManager/Components/DataSourceIcon';
-import { isQueryRunnable } from '@/_helpers/utils';
-
-function decodeEntities(encodedString) {
- return encodedString.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>');
-}
+import { isQueryRunnable, decodeEntities } from '@/_helpers/utils';
 
 export const QueryCard = ({ dataQuery, darkMode = false, editorRef, appId }) => {
  const selectedQuery = useSelectedQuery();

frontend/src/GlobalDatasources/LIstItem/index.jsx

@@ -7,10 +7,7 @@ import useGlobalDatasourceUnsavedChanges from '@/_hooks/useGlobalDatasourceUnsav
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { ToolTip } from '@/_components';
 import { DATA_SOURCE_TYPE } from '@/_helpers/constants';
-
-function decodeEntities(encodedString) {
- return encodedString.replace(/&lt;/g, '<').replace(/&gt;/g, '>');
-}
+import { decodeEntities } from '@/_helpers/utils';
 
 export const ListItem = ({
  dataSource,

frontend/src/HomePage/AppCard.jsx

@@ -12,7 +12,7 @@ import SolidIcon from '@/_ui/Icon/SolidIcons';
 import BulkIcon from '@/_ui/Icon/BulkIcons';
 
 import { getPrivateRoute, getSubpath } from '@/_helpers/routes';
-import { validateName } from '@/_helpers/utils';
+import { validateName, decodeEntities } from '@/_helpers/utils';
 const { defaultIcon } = configs;
 
 export default function AppCard({
@@ -104,7 +104,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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import Layout from '@/_ui/Layout';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
 import { BreadCrumbContext } from '@/App/App';
+import { decodeEntities } from '@/_helpers/utils';
 
 function SettingsPage(props) {
  const currentSession = authenticationService.currentSessionValue;
@@ -161,7 +162,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

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { authenticationService } from '@/_services';
 import SolidIcon from '@/_ui/Icon/SolidIcons';
 import { ToolTip } from '@/_components';
+import { decodeEntities } from '@/_helpers/utils';
 
 const Menu = (props) => {
  const { t } = useTranslation();
@@ -56,7 +57,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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { authenticationService } from '@/_services';
 import { CustomSelect } from './CustomSelect';
-import { getAvatar } from '@/_helpers/utils';
+import { getAvatar, decodeEntities } from '@/_helpers/utils';
 import { appendWorkspaceId, getWorkspaceIdOrSlugFromURL } from '@/_helpers/routes';
 import { ToolTip } from '@/_components';
 
@@ -44,7 +44,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/_helpers/utils.js

@@ -1279,3 +1279,8 @@ export const setWindowTitle = async (pageDetails, location) => {
  document.title = !(pageDetails?.preview === false) ? `${pageTitle} | ${whiteLabelText}` : `${pageTitle}`;
  }
 };
+
+//For <>& UI display issues
+export function decodeEntities(encodedString) {
+ return encodedString?.replace(/&lt;/gi, '<')?.replace(/&gt;/gi, '>')?.replace(/&amp;/gi, '&');
+}

frontend/src/_ui/Breadcrumbs/index.jsx

@@ -3,6 +3,7 @@ import { Link, useLocation } from 'react-router-dom';
 import SolidIcon from '../Icon/SolidIcons';
 import { BreadCrumbContext } from '../../App/App';
 import useBreadcrumbs from 'use-react-router-breadcrumbs';
+import { decodeEntities } from '@/_helpers/utils';
 
 export const Breadcrumbs = ({ darkMode, dataCy }) => {
  const { sidebarNav } = useContext(BreadCrumbContext);
@@ -20,7 +21,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>