chore: Improve hot reloading (#4808)

frontend/package.json

@@ -143,14 +143,15 @@
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-middleware": "5.3.4",
-    "webpack-hot-middleware": "2.25.3",
+    "webpack-hot-middleware": "2.26.1",
     "whatwg-fetch": "3.0.0",
     "x-frame-options": "^1.0.0",
     "yaml": "^2.2.2"
   },
   "devDependencies": {
     "@dword-design/eslint-plugin-import-alias": "^2.0.7",
     "@ffmpeg-installer/ffmpeg": "^1.1.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@types/classnames": "^2.3.1",
     "@types/color": "^3.0.3",
     "@types/dompurify": "^3.0.2",
@@ -171,6 +172,7 @@
     "eslint-plugin-sort-keys-fix": "^1.1.2",
     "nodemon": "^3.0.1",
     "raw-loader": "0.5.1",
+    "react-refresh": "^0.14.2",
     "ssgrtk": "^0.3.5",
     "testcafe": "^3.2.0",
     "typescript": "4.6.4"

frontend/web/components/datadog-client.ts

@@ -1,20 +1,21 @@
 import { DDClient, init } from '@datadog/ui-extensions-sdk'
 import API from 'project/api'
 
-const client: DDClient = init({
-  authProvider: {
-    authStateCallback: async () => {
-      const user = API.getCookie('t')
-      return {
-        isAuthenticated: !!user,
-      }
-    },
-    resolution: 'message',
+const client: () => DDClient = () =>
+  init({
+    authProvider: {
+      authStateCallback: async () => {
+        const user = API.getCookie('t')
+        return {
+          isAuthenticated: !!user,
+        }
+      },
+      resolution: 'message',
 
-    /**
-     * This where we want Datadog to direct users to authenticate.
-     */
-    url: '/',
-  },
-})
+      /**
+       * This where we want Datadog to direct users to authenticate.
+       */
+      url: '/',
+    },
+  })
 export default client

frontend/web/components/pages/WidgetPage.tsx

@@ -1,4 +1,10 @@
-import React, { Component, ReactNode, useEffect, useState } from 'react'
+import React, {
+  Component,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import TagFilter from 'components/tags/TagFilter'
 import Tag from 'components/tags/Tag'
 import FeatureRow from 'components/FeatureRow'
@@ -27,7 +33,7 @@ import {
   TagStrategy,
 } from 'common/types/responses'
 import { useCustomWidgetOptionString } from '@datadog/ui-extensions-react'
-import client from 'components/datadog-client'
+import ddClient from 'components/datadog-client'
 import { resolveAuthFlow } from '@datadog/ui-extensions-sdk'
 import AuditLog from 'components/AuditLog'
 import OrgEnvironmentSelect from 'components/OrgEnvironmentSelect'
@@ -463,6 +469,9 @@ export default function Widget() {
   useEffect(() => {
     document.body.classList.add('widget-mode')
   }, [])
+  const client = useMemo(() => {
+    return ddClient()
+  }, [])
   const projectId = useCustomWidgetOptionString(client, 'Project')
   const environmentId = useCustomWidgetOptionString(client, 'Environment')
   const pageSize = useCustomWidgetOptionString(client, 'PageSize') || '5'

frontend/webpack/webpack.config.local.js

@@ -4,6 +4,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 
 const base = require('../webpack.config');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 module.exports = {
     ...base,
@@ -15,6 +16,7 @@ module.exports = {
         './web/main.js',
     ],
     devServer: {
+        hot: true,
         outputPath: __dirname,
     },
     output: {
@@ -26,6 +28,7 @@ module.exports = {
 
     plugins: require('./plugins').concat([
         new webpack.HotModuleReplacementPlugin(),
+        new ReactRefreshWebpackPlugin(),
         new webpack.DefinePlugin({
             __DEV__: true,
             whitelabel: JSON.stringify(process.env.WHITELABEL),