Link names are blurry / shown twice in Clarity PPM MUX Links module

Products

• Clarity PPM SaaS
• Clarity PPM On Premise

Issue/Introduction

There is a screen corruption issue with menu links appearing blurred in the Modern User Experience (UX / MUX). Characters in links appear like double vision. This may also be noticed in other areas outside of Menus such as Custom Investment links or other modules on investments. What is causing the behavior with links not loading properly? 

Additional symptoms reported:

Link names are overlapped by itself Links are double rendering / doubled up Links duplicated on top of the original link Links misaligned / jumbled Links are smudged/overlapping

Links are unclear due to the overlayed text displayed Displayed as unreadable text.  The images / graphics associated with the links do not display Images are not merging with the Link.

STEPS TO REPRODUCE: 

1. Login to Clarity
2. Navigate to New UX -> Links.
3. Create a Link with address "https://example.com" and name as Example
4. Save.

Expected Results: Link name is shown on the page.

Actual Results: Link name is overlapped and a broken image icon is also shown.

Environment

Release : 15.9.2, 15.9.3, 16.0.0

Component : Menu Links view, Link Module in projects, Link Module in Ideas

Browser: Chrome, Edge, Safari, Firefox

All environments (Prod, Test, Sandbox, Stage, Development)

Cause

This is a defect DE63557

Reviewing the browser trace shows  CONTENT_SECURITY_POLICY validation with an error "Refused to load the image... because it violates the following Content Security Policy directive"

Resolution

Fixed in 15.9.3.3 and 16.0.1

Workaround:

This is applicable until Clarity is upgraded to 16.0.1. 

• PostgreSQL Only Database
• Oracle / Microsoft SQL Databases

PostgreSQL Only Database

1. Stop all the Clarity services
2. Take backup of table cmn_option_values. 
3. Execute the below SQL update
   
   UPDATE
 cmn_option_values
SET
 value = REPLACE(value, 'img-src ##domains## example.com data:;','img-src ##domains## example.com *.gstatic.com data:;')
WHERE
 option_id =(
 SELECT
  id
 FROM
  cmn_options
 WHERE
  option_code = 'CONTENT_SECURITY_POLICY_HEADER')
   
   
4. Restart all the Clarity services 

Oracle / Microsoft SQL Databases

1. Stop all the Clarity services
2. Take a backup of table cmn_option_values. 
3. Execute the below SQL update
   
   update
 cmn_option_values
set
 value = replace(value, 'img-src ##domains## example.com data:;','img-src ##domains## example.com *.gstatic.com data:;')
where
 option_id = (
 select
  id
 from
  cmn_options
 where
  option_code = 'CONTENT_SECURITY_POLICY_HEADER')
   
   
4. Restart all the Clarity services