From cc40e851cd2bcf5b063876b93bb90afd854f45c0 Mon Sep 17 00:00:00 2001
From: Bastian Schmidt <schmidt@atix.de>
Date: Wed, 8 May 2024 09:17:12 +0200
Subject: [PATCH] Remove react-dom/server dependency

ReactDOMServer has been used to compare React components.
Such comparison is not necessary and therefore, the dependency
can be removed.
---
 .../components/Resource/UtilizationProgress.js | 18 ++++++++++--------
 webpack/helper.js                              | 12 ------------
 2 files changed, 10 insertions(+), 20 deletions(-)

diff --git a/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js b/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js
index 13ef07e..b9a0631 100644
--- a/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js
+++ b/webpack/components/ResourceQuotaForm/components/Resource/UtilizationProgress.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
   Progress,
@@ -40,7 +40,8 @@ const UtilizationProgress = ({
     else if (resourceUtilizationPercent < 100) return ProgressVariant.warning;
     return ProgressVariant.danger;
   };
-  const updateResourceUtilizationView = () => {
+
+  const updateResourceUtilizationView = useCallback(() => {
     let newPercent;
     let newTooltipText;
 
@@ -93,13 +94,14 @@ const UtilizationProgress = ({
         </div>
       );
     }
-    if (resourceUtilizationPercent !== newPercent)
-      setResourceUtilizationPercent(newPercent);
-    if (!areReactElementsEqual(resourceUtilizationTooltipText, newTooltipText))
-      setResourceUtilizationTooltipText(newTooltipText);
-  };
+    setResourceUtilizationPercent(newPercent);
+    setResourceUtilizationTooltipText(newTooltipText);
+  }, [isNewQuota, resourceUnits, resourceUtilization, resourceValue]);
+
   // call it once
-  updateResourceUtilizationView();
+  useEffect(() => {
+    updateResourceUtilizationView();
+  }, [updateResourceUtilizationView]);
 
   return (
     <div>
diff --git a/webpack/helper.js b/webpack/helper.js
index 63d07b4..60ca7c7 100644
--- a/webpack/helper.js
+++ b/webpack/helper.js
@@ -1,5 +1,3 @@
-import ReactDOMServer from 'react-dom/server';
-
 /**
  * Performs a deep equality comparison between two objects, including nested objects and arrays.
  * @param {Object} obj1 - The first object to compare.
@@ -37,16 +35,6 @@ const deepEqual = (obj1, obj2) => {
   return true;
 };
 
-const areReactElementsEqual = (element1, element2) => {
-  const elementToStr = element =>
-    element && ReactDOMServer.renderToStaticMarkup(element);
-
-  const element1Str = elementToStr(element1);
-  const element2Str = elementToStr(element2);
-
-  return element1Str === element2Str;
-};
-
 /**
  * Recursively copies values from the source hash (`src`) to the destination hash (`dest`).
  * Only keys that are a member of dest will copied from src.