[hotfix]: fix nonce in splitter (#254)

package.json

@@ -33,7 +33,6 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.2",
-    "@devbookhq/splitter": "^1.4.2",
     "@emotion/react": "^11.11.4",
     "@fontsource-variable/nunito-sans": "^5.0.14",
     "@lingui/macro": "^4.11.0",
@@ -92,6 +91,7 @@
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-is": "^18.3.0",
     "@types/react-lazy-load-image-component": "^1.6.4",
     "@types/react-window": "^1.8.8",
     "@typescript-eslint/eslint-plugin": "^7.11.0",

src/Main.tsx

@@ -2,7 +2,6 @@ import { LicenseInfo } from '@mui/x-license'
 import { HTMLAttributes, MetaHTMLAttributes } from 'react'
 import ReactDOM from 'react-dom/client'
 import { App } from './App'
-import reportWebVitals from './reportWebVitals'
 import { env } from './shared/constants'
 
 if (env.muiLicenseKey) {
@@ -33,4 +32,11 @@ nonce = undefined
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.info))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
+if (env.isLocal) {
+  void import(
+    /* webpackChunkName: "reportWebVitals" */
+    './reportWebVitals'
+  ).then((reportWebVitals) => {
+    reportWebVitals.default(console.info)
+  })
+}

src/assets/icons/createIcon.tsx

@@ -1,11 +1,13 @@
 import { Palette, useTheme } from '@mui/material'
-import { FC, FunctionComponent, SVGProps } from 'react'
+import { FC, FunctionComponent, SVGProps, forwardRef } from 'react'
+import { useNonce } from 'src/shared/providers'
 
-type SvgIconProps = SVGProps<SVGSVGElement> & { title?: string | undefined }
+type SvgIconProps = SVGProps<SVGSVGElement> & { title?: string; nonce?: string }
 
 export const createIcon = (Icon: FunctionComponent<SvgIconProps>) => {
-  const SvgIconComp: FC<SvgIconProps> = ({ color, fill, ...props }) => {
+  const SvgIconComp: FC<SvgIconProps> = forwardRef(({ color, fill, ...props }, ref) => {
     const { palette } = useTheme()
+    const nonce = useNonce()
     type KeyOfPalette = 'common'
     type PaletteAsObject = Palette[KeyOfPalette]
     type KeyOfPaletteAsObject = keyof PaletteAsObject
@@ -20,8 +22,8 @@ export const createIcon = (Icon: FunctionComponent<SvgIconProps>) => {
     ) {
       iconColor = palette[firstColorKey][secondColorKey as KeyOfPaletteAsObject]
     }
-    return <Icon {...props} fill={iconColor} />
-  }
+    return <Icon nonce={nonce} {...props} ref={ref} fill={iconColor} />
+  })
   SvgIconComp.displayName = Icon.displayName || Icon.name
   return SvgIconComp
 }

src/locales/de-DE/messages.po

@@ -1033,14 +1033,6 @@ msgstr "Stündliche"
 msgid "How to fix"
 msgstr "Wie repariert man"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:185
-#~ msgid "How we detect"
-#~ msgstr ""
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:211
-#~ msgid "How you can detect"
-#~ msgstr ""
-
 #: src/pages/panel/workspace-settings-accounts-setup-cloud-gcp/getInstructions.tsx:45
 msgid "IAM"
 msgstr ""
@@ -1267,14 +1259,6 @@ msgstr "Monatlicher E-Mail-Bericht"
 msgid "More info"
 msgstr "Mehr Info"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:79
-#~ msgid "More info about check"
-#~ msgstr ""
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:102
-#~ msgid "More info about fix"
-#~ msgstr ""
-
 #: src/pages/panel/security/OverallCard.tsx:183
 msgid "Most Improved Accounts"
 msgstr "Am meisten verbesserte Konten"
@@ -1362,12 +1346,6 @@ msgstr ""
 msgid "No {label} found for {typed}"
 msgstr ""
 
-#: src/pages/panel/benchmark-detail/BenchmarkCheckCollectionDetail.tsx:145
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:174
-#: src/pages/panel/benchmark-detail/BenchmarkDetailView.tsx:168
-#~ msgid "No resources that are affected by this check"
-#~ msgstr ""
-
 #: src/pages/panel/inventory/inventory-form/InventoryFormChangesValue.tsx:31
 msgid "Node Compliant"
 msgstr ""
@@ -1716,10 +1694,6 @@ msgstr "Risiko"
 msgid "Roles"
 msgstr "Rollen"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:66
-#~ msgid "Search"
-#~ msgstr ""
-
 #: src/pages/panel/inventory/inventory-form/InventoryFormDefaultValue.tsx:167
 msgid "Search {0}"
 msgstr ""
@@ -2089,14 +2063,6 @@ msgstr "Wöchentlicher Report"
 msgid "Why does it matter"
 msgstr ""
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:206
-#~ msgid "with command line"
-#~ msgstr ""
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:190
-#~ msgid "with search, <0>try it</0>"
-#~ msgstr ""
-
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:178
 msgid "Within a billing cycle you will be charged for the highest product tier that was active."
 msgstr ""

src/locales/en-US/messages.po

@@ -1033,14 +1033,6 @@ msgstr "Hourly"
 msgid "How to fix"
 msgstr "How to fix"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:185
-#~ msgid "How we detect"
-#~ msgstr "How we detect"
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:211
-#~ msgid "How you can detect"
-#~ msgstr "How you can detect"
-
 #: src/pages/panel/workspace-settings-accounts-setup-cloud-gcp/getInstructions.tsx:45
 msgid "IAM"
 msgstr "IAM"
@@ -1267,14 +1259,6 @@ msgstr "Monthly email report"
 msgid "More info"
 msgstr "More info"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:79
-#~ msgid "More info about check"
-#~ msgstr "More info about check"
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:102
-#~ msgid "More info about fix"
-#~ msgstr "More info about fix"
-
 #: src/pages/panel/security/OverallCard.tsx:183
 msgid "Most Improved Accounts"
 msgstr "Most Improved Accounts"
@@ -1362,12 +1346,6 @@ msgstr "No"
 msgid "No {label} found for {typed}"
 msgstr "No {label} found for {typed}"
 
-#: src/pages/panel/benchmark-detail/BenchmarkCheckCollectionDetail.tsx:145
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:174
-#: src/pages/panel/benchmark-detail/BenchmarkDetailView.tsx:168
-#~ msgid "No resources that are affected by this check"
-#~ msgstr "No resources that are affected by this check"
-
 #: src/pages/panel/inventory/inventory-form/InventoryFormChangesValue.tsx:31
 msgid "Node Compliant"
 msgstr "Node Compliant"
@@ -1716,10 +1694,6 @@ msgstr "Risk"
 msgid "Roles"
 msgstr "Roles"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:66
-#~ msgid "Search"
-#~ msgstr "Search"
-
 #: src/pages/panel/inventory/inventory-form/InventoryFormDefaultValue.tsx:167
 msgid "Search {0}"
 msgstr "Search {0}"
@@ -2089,14 +2063,6 @@ msgstr "Weekly Report"
 msgid "Why does it matter"
 msgstr "Why does it matter"
 
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:206
-#~ msgid "with command line"
-#~ msgstr "with command line"
-
-#: src/pages/panel/benchmark-detail/BenchmarkDetailCheckDetail.tsx:190
-#~ msgid "with search, <0>try it</0>"
-#~ msgstr "with search, <0>try it</0>"
-
 #: src/pages/panel/workspace-settings-billing/ChangeProductTierModal.tsx:178
 msgid "Within a billing cycle you will be charged for the highest product tier that was active."
 msgstr "Within a billing cycle you will be charged for the highest product tier that was active."

src/pages/panel/benchmark-detail/BenchmarkDetailPage.tsx

@@ -11,7 +11,7 @@ export default function BenchmarkDetailPage() {
       spacing={1}
       height={{ xs: 'calc(100vh - 185px)', lg: 'calc(100vh - 185px)' }}
       maxHeight={{ xs: 'calc(100vh - 185px)', lg: 'calc(100vh - 185px)' }}
-      minHeight={{ xs: 400, lg: 400 }}
+      minHeight={{ xs: 300, lg: 300 }}
       width="100%"
     >
       <BenchmarkDetailTree />

src/pages/panel/benchmark-detail/BenchmarkDetailSplitter.tsx

@@ -1,7 +1,8 @@
-import Splitter, { GutterTheme, SplitDirection } from '@devbookhq/splitter'
 import { Stack, Theme, useMediaQuery } from '@mui/material'
 import { ReactNode, useMemo } from 'react'
 import { useThemeMode } from 'src/core/theme'
+import { useNonce } from 'src/shared/providers'
+import { GutterTheme, SplitDirection, Splitter } from 'src/shared/splitter'
 import { usePersistState } from 'src/shared/utils/usePersistState'
 
 export interface BenchmarkDetailSplitterProps {
@@ -16,6 +17,7 @@ const getChildSizes = (children: BenchmarkDetailSplitterProps['children']) => {
 }
 
 export const BenchmarkDetailDesktopSplitter = ({ children, isMobile }: BenchmarkDetailSplitterProps) => {
+  const nonce = useNonce()
   const [sizes, setSizes] = usePersistState<number[] | undefined>('BenchmarkDetailDesktopSplitter.initialSizes', () =>
     getChildSizes(children),
   )
@@ -29,6 +31,7 @@ export const BenchmarkDetailDesktopSplitter = ({ children, isMobile }: Benchmark
         gutterTheme={mode === 'dark' ? GutterTheme.Dark : GutterTheme.Light}
         onResizeFinished={(_, newSizes) => setSizes(newSizes)}
         classes={children.map(() => 'dbk-child-wrapper')}
+        nonce={nonce}
       >
         {children}
       </Splitter>