Handle CSP violations in PAL components

[amal-k-joy]

Ensure PAL components are CSP complaint.

• [ ] Include the respective component name in the forbid configuration inside package.json
• [ ] Run yarn lint and fix the errors
• [ ] Replace style={{}} usage with classNames where appropriate
• [ ] Set dynamic styles using useIsomorphicEffect()

[elycheea]

@matthewgallo @amal-k-joy Do we think it make more sense to address CSP issues for individual components or address them in one larger PR for a quicker resolution (but at the risk of more conflicts with other PRs).

It does look like when the System team addressed these, it was mostly within one larger PR. Might still be worth breaking out some of the components if the fixes are more involved, but my feeling is that most might be able to be addressed in one go.

I think we can also exclude examples, **.stories.js, **.story.js, **.test.js, thumbnails/**.svg and probably mdx/docs-page as well. (Did I miss any?)

SVG might still be better to address a bit separately since it sounded like the fix for it might be more involved.

[elycheea]

Seeing ~34 files with the following exclusions:

src/**/**/**.stories.jsx, src/**/**/**.story.jsx, thumbnails/**.svg, examples/**, packages/core/*, **.test.js

I suggest we group the remaining fixes this way —

• Carousel.tsx
• ~Checklist.mdx~
• ChecklistChart.js
• Coachmark.tsx
• CoachmarkOverlay.tsx

--

• ~Datagrid.mdx~
• DatagridExpandedRow.tsx
• DatagridRow
• DatagridVirtualBody.tsx
• DraggableElement.tsx
• ~Datagrid/Datagrid.stories/common.js~
• ~Filtering.docs-page.js~
• DatagridActions.js
• ~utils/Wrapper.js~

--

• DataSpreadsheetBody.tsx
• DataSpreadsheetHeader.tsx
• NotificationPanel.tsx
• PageHeader.tsx
• TearsheetShell.tsx

--

• ScrollGradient.js
• StringFormatter.js
• TruncatedList.tsx
• WebTerminal.tsx

--

• ~DragAndDrop/preview-components/GridContainer.js~
• ~DragAndDrop/preview-components/Item.js~
• ~DragAndDrop/preview-components/Sortable.js~
• ~DragAndDrop/preview-components/SortableItem.js~
• ~DragAndDrop/preview-components/Underlay.js~
• ~ExampleComponent.js~
• ~FullPageError/preview-components/UiShell.js~
• ~StoryDocsPage.js~

[tom-youd]

Please can NoDataEmptyState be added to the list please? I've noticed this component has inline style blocks

[elycheea]

@tom-youd I believe this was covered in our SVG updates. Based on when the PR was merged, it should be included in our next release candidate (Monday, Oct 28^1).