From a75a5b72b2fb00b25cbe681f012b545680171f4b Mon Sep 17 00:00:00 2001
From: Christoffer Bjelke <56649743+chribjel@users.noreply.github.com>
Date: Wed, 4 Dec 2024 16:07:30 +0100
Subject: [PATCH] chore: enable eslint rule react/no-danger (#17983)

* enable react/no-danger and disable rule all places

* remove wild rule
---
 apps/web/app/layout.tsx                                  | 2 ++
 apps/web/components/PageWrapper.tsx                      | 3 +++
 apps/web/components/PageWrapperAppDir.tsx                | 3 +++
 apps/web/components/team/screens/Team.tsx                | 4 ++--
 apps/web/modules/apps/[slug]/slug-view.tsx               | 1 +
 apps/web/modules/bookings/views/bookings-single-view.tsx | 1 +
 apps/web/modules/signup-view.tsx                         | 4 ++++
 apps/web/modules/team/team-view.tsx                      | 1 +
 apps/web/modules/users/views/users-public-view.tsx       | 1 +
 apps/web/modules/videos/views/videos-single-view.tsx     | 1 +
 apps/web/pages/_document.tsx                             | 1 +
 packages/app-store/BookingPageTagManager.tsx             | 3 +++
 packages/config/eslint-preset.js                         | 9 +++++++++
 packages/emails/src/components/Info.tsx                  | 1 +
 packages/emails/src/components/RawHtml.tsx               | 1 +
 .../features/bookings/Booker/components/EventMeta.tsx    | 1 +
 .../pages/settings/other-team-profile-view.tsx           | 3 ++-
 .../features/ee/organizations/pages/settings/profile.tsx | 1 +
 packages/features/ee/teams/pages/team-profile-view.tsx   | 3 ++-
 .../eventtypes/components/EventTypeDescription.tsx       | 1 +
 packages/features/form-builder/FormBuilder.tsx           | 1 +
 packages/ui/components/form/checkbox/Checkbox.tsx        | 1 +
 22 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 3deb43e738..e900cbb6b2 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -74,6 +74,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           <script
             nonce={nonce}
             id="injected-head-scripts"
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: process.env.NEXT_PUBLIC_HEAD_SCRIPTS,
             }}
@@ -105,6 +106,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
           <script
             nonce={nonce}
             id="injected-head-scripts"
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: process.env.NEXT_PUBLIC_BODY_SCRIPTS,
             }}
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
index 9270504f0e..fb1308290e 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/apps/web/components/PageWrapper.tsx
@@ -81,6 +81,9 @@ function PageWrapper(props: AppProps) {
       <Script
         nonce={nonce}
         id="page-status"
+        // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
+        // And we don't want it to error here anyways
+        // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
       />
 
diff --git a/apps/web/components/PageWrapperAppDir.tsx b/apps/web/components/PageWrapperAppDir.tsx
index 7ffc679986..f97125fe16 100644
--- a/apps/web/components/PageWrapperAppDir.tsx
+++ b/apps/web/components/PageWrapperAppDir.tsx
@@ -54,6 +54,9 @@ function PageWrapper(props: PageWrapperProps) {
         <Script
           nonce={nonce}
           id="page-status"
+          // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
+          // And we don't want it to error here anyways
+          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
         />
         {getLayout(
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index f2d28d92f5..6905ae1f5b 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -2,7 +2,6 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
-import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import type { UserProfile } from "@calcom/types/UserProfile";
@@ -40,7 +39,8 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
               <>
                 <div
                   className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: md.render(markdownToSafeHTML(member.bio)) }}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(member.bio) }}
                 />
               </>
             ) : (
diff --git a/apps/web/modules/apps/[slug]/slug-view.tsx b/apps/web/modules/apps/[slug]/slug-view.tsx
index da843e0e38..6331f81e40 100644
--- a/apps/web/modules/apps/[slug]/slug-view.tsx
+++ b/apps/web/modules/apps/[slug]/slug-view.tsx
@@ -72,6 +72,7 @@ function SingleAppPage(props: PageProps) {
       //   privacy="https://zoom.us/privacy"
       body={
         <>
+          {/* eslint-disable-next-line react/no-danger */}
           <div dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(source.content) }} />
         </>
       }
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 464e3bfee9..be7902f94e 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -674,6 +674,7 @@ export default function Success(props: PageProps) {
                             <>
                               <div
                                 className="text-emphasis mt-4 font-medium"
+                                // eslint-disable-next-line react/no-danger
                                 dangerouslySetInnerHTML={{
                                   __html: markdownToSafeHTML(label),
                                 }}
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index d37d4677ec..a573bb3ce3 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -303,6 +303,9 @@ export default function Signup({
             <>
               <Script
                 id="gtm-init-script"
+                // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
+                // And we don't want it to error here anyways
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: `(function (w, d, s, l, i) {
                         w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
@@ -312,6 +315,7 @@ export default function Signup({
                 }}
               />
               <noscript
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
                 }}
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index 245b3b5e9c..c877318abb 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -194,6 +194,7 @@ function TeamPage({
             <>
               <div
                 className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}
               />
             </>
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 4291262946..aef379fa14 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -119,6 +119,7 @@ export function UserPage(props: PageProps) {
               <>
                 <div
                   className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: props.safeBio }}
                 />
               </>
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 524fe7da73..2a2c39fa00 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -257,6 +257,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
 
               <div
                 className="prose-sm prose prose-invert"
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(booking.description) }}
               />
             </>
diff --git a/apps/web/pages/_document.tsx b/apps/web/pages/_document.tsx
index a8c7d3c55e..6bbf4792db 100644
--- a/apps/web/pages/_document.tsx
+++ b/apps/web/pages/_document.tsx
@@ -66,6 +66,7 @@ class MyDocument extends Document<Props> {
           <script
             nonce={nonce}
             id="newLocale"
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: `
               window.calNewLocale = "${newLocale}";
diff --git a/packages/app-store/BookingPageTagManager.tsx b/packages/app-store/BookingPageTagManager.tsx
index 3c5343d44b..6b3955b9bd 100644
--- a/packages/app-store/BookingPageTagManager.tsx
+++ b/packages/app-store/BookingPageTagManager.tsx
@@ -137,6 +137,9 @@ export default function BookingPageTagManager({
               src={parseValue(script.src)}
               id={`${appId}-${index}`}
               key={`${appId}-${index}`}
+              // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
+              // And we don't want it to error here anyways
+              // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: parseValue(script.content) || "",
               }}
diff --git a/packages/config/eslint-preset.js b/packages/config/eslint-preset.js
index 6b5377054f..4b43dccebe 100644
--- a/packages/config/eslint-preset.js
+++ b/packages/config/eslint-preset.js
@@ -26,6 +26,15 @@ module.exports = {
     "playwright/no-page-pause": "error",
     "react/jsx-curly-brace-presence": ["error", { props: "never", children: "never" }],
     "react/self-closing-comp": ["error", { component: true, html: true }],
+
+    // In a newer version of react/no-danger, this is a valid config
+    // to allow errors in custom components
+    // but it would error anyway, because of a bug, not yet fixed
+    // PR that enables this config: https://github.com/jsx-eslint/eslint-plugin-react/pull/3748
+    // Issue still not fixed: https://github.com/jsx-eslint/eslint-plugin-react/issues/3833
+    // "react/no-danger": ["error", { customComponentNames: ["*"] }],
+
+    "react/no-danger": "error",
     "@typescript-eslint/no-unused-vars": [
       "warn",
       {
diff --git a/packages/emails/src/components/Info.tsx b/packages/emails/src/components/Info.tsx
index 96ab1ef45f..aaba02b83d 100644
--- a/packages/emails/src/components/Info.tsx
+++ b/packages/emails/src/components/Info.tsx
@@ -21,6 +21,7 @@ export const Info = (props: {
     return (
       <p
         className="dark:text-darkgray-600 mt-2 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+        // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{
           __html: htmlContent
             .replaceAll("<p>", `<p style="${css}">`)
diff --git a/packages/emails/src/components/RawHtml.tsx b/packages/emails/src/components/RawHtml.tsx
index 495949e49c..9841e90295 100644
--- a/packages/emails/src/components/RawHtml.tsx
+++ b/packages/emails/src/components/RawHtml.tsx
@@ -1,5 +1,6 @@
 /** @see https://gist.github.com/zomars/4c366a0118a5b7fb391529ab1f27527a */
 const RawHtml = ({ html = "" }) => (
+  // eslint-disable-next-line react/no-danger
   <script dangerouslySetInnerHTML={{ __html: `</script>${html}<script>` }} />
 );
 
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 342789bfbc..27cfe21879 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -139,6 +139,7 @@ export const EventMeta = ({
           {(event.description || translatedDescription) && (
             <EventMetaBlock contentClassName="mb-8 break-words max-w-full max-h-[180px] scroll-bar pr-4">
               <div
+                // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
                   __html: markdownToSafeHTML(translatedDescription ?? event.description),
                 }}
diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
index cb509f4241..b516f4f731 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
@@ -286,7 +286,8 @@ const OtherTeamProfileView = () => {
                     <Label className="text-emphasis mt-5">{t("about")}</Label>
                     <div
                       className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                      dangerouslySetInnerHTML={{ __html: md.render(markdownToSafeHTML(team.bio)) }}
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(team.bio) }}
                     />
                   </>
                 )}
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index 728938a9e2..ac4a82000a 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -145,6 +145,7 @@ const OrgProfileView = () => {
                   <Label className="text-emphasis mt-5">{t("about")}</Label>
                   <div
                     className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{
                       __html: markdownToSafeHTML(currentOrganisation.bio || ""),
                     }}
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index bb63f2bab0..3ab6250fc1 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -190,7 +190,8 @@ const ProfileView = ({ isAppDir }: { isAppDir?: boolean }) => {
                 <Label className="text-emphasis mt-5">{t("about")}</Label>
                 <div
                   className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: md.render(markdownToSafeHTML(team.bio ?? null)) }}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(team.bio ?? null) }}
                 />
               </>
             )}
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index 80010723dc..0afecba829 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -50,6 +50,7 @@ export const EventTypeDescription = ({
               "text-subtle line-clamp-3 break-words py-1 text-sm sm:max-w-[650px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
               shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
             )}
+            // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: markdownToSafeHTML(eventType.descriptionAsSafeHTML || ""),
             }}
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index d95b6e61ea..1cf9e90e37 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -712,6 +712,7 @@ function FieldLabel({ field }: { field: RhfFormField }) {
     if (fieldsThatSupportLabelAsSafeHtml.includes(field.type)) {
       return (
         <span
+          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
             // Derive from field.label because label might change in b/w and field.labelAsSafeHtml will not be updated.
             __html: markdownToSafeHTMLClient(field.label || t(field.defaultLabel || "") || ""),
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 048812d66e..d951af317c 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -95,6 +95,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                 {descriptionAsSafeHtml ? (
                   <span
                     className={classNames("text-sm", rest.descriptionClassName)}
+                    // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{
                       __html: markdownToSafeHTML(descriptionAsSafeHtml),
                     }}