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

@@ -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,
             }}

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}'` }}
       />
 

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(

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) }}
                 />
               </>
             ) : (

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) }} />
         </>
       }

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),
                                 }}

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>`,
                 }}

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 }}
               />
             </>

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 }}
                 />
               </>

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) }}
               />
             </>

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}";

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) || "",
               }}

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",
       {

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}">`)

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>` }} />
 );
 

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),
                 }}

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) }}
                     />
                   </>
                 )}

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 || ""),
                     }}

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) }}
                 />
               </>
             )}

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 || ""),
             }}

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 || "") || ""),

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),
                     }}