Rebase and fix warning in development mode

Signed-off-by: Egor Savkin <es@m-labs.hk>

package.json

@@ -12,25 +12,25 @@
     "url": "https://git.m-labs.hk/M-Labs/web2019.git"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.6",
+    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.22.8",
+    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-react": "^7.22.15",
-    "axios": "^1.4.0",
+    "axios": "^1.6.0",
     "babel-loader": "^9.1.3",
     "babel-preset-minify": "^0.5.2",
     "bootstrap": "^5.3.0",
     "jquery": "^3.7.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.8.0",
+    "react-bootstrap": "^2.9.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
-    "uuid": "^9.0.0",
+    "uuid": "^9.0.1",
-    "webpack": "^5.88.1",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "json-logic-js": "^2.0.2",
-    "@uidotdev/usehooks": "^2.1.1"
+    "@uidotdev/usehooks": "^2.4.1"
   },
   "babel": {
     "presets": [

static/js/shop.jsx

@@ -6,7 +6,8 @@ import { createRoot } from "react-dom/client";
 import PropTypes from "prop-types";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { v4 as uuidv4 } from 'uuid';
-import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, FillExtData } from "./shop_components.jsx";import { OverlayTrigger } from "react-bootstrap";
+import { OptionsDialogPopup, OptionsSummaryPopup, FilterOptions, FillExtData } from "./shop_components.jsx";
+import { OverlayTrigger } from "react-bootstrap";
 
 const data = window.shop_data;
 const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
@@ -619,37 +620,23 @@ class ProductCartItem extends React.PureComponent {
     if (data) {
       switch(model.type) {
         case 'kasli':
-          render_progress = (
+          render_progress = [
-            <div className="k-popup-connectors">
+              (<p key={model.type+model.id+"EEM"}>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>),
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
+              (<p key={model.type+model.id+"CLK"}>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>)
-              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
+          ];
-            </div>
-          );
           break;
 
         case 'vhdcicarrier':
-          render_progress = (
+          render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>);
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} EEM connectors used`}</p>
-            </div>
-          );
           break;
 
         case 'zotino':
         case 'hd68':
-          render_progress = (
+          render_progress = (<p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>);
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentSlot}/${model.nbrSlotMax} connectors used`}</p>
-            </div>
-          );
           break;
 
         case 'clocker':
-          render_progress = (
+          render_progress = (<p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>);
-            <div className="k-popup-connectors">
-              <p>{`${data.nbrCurrentClock}/${model.nbrClockMax} Clock connectors used`}</p>
-            </div>
-          );
           break;
 
         default:
@@ -679,59 +666,45 @@ class ProductCartItem extends React.PureComponent {
 
             {/* warning container */}
             <OverlayTrigger
-                placement="bottom"
+              placement="bottom"
-                trigger={warning ? ['click', 'hover', 'focus'] : []}
+              trigger={warning ? ['click', 'hover', 'focus'] : []}
-                overlay={
+              overlay={
-                  warning ? (<div className="k-popup-warning">
+                ({arrowProps, hasDoneInitialMeasure, show, ...props}) => (
-                    <p className="rule warning">
+                <div className="k-popup-warning" {...props}>
-                      <i>{warning.message}</i>
-                    </p>
-                  </div>) : null
-                }
-                rootClose
-            >
-              <div className="progress-container warning">
-                {warning && (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>)}
-              </div>
-            </OverlayTrigger>
-
-            <div
-                className="progress-container warning"
-                onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
-                onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
-
-              {warning ? (
-                <img className="alert-warning" src={`/images${warning.icon}`} />
-              ) : (options ? (<OptionsDialogPopup
-                  options={options}
-                  data={options_data}
-                  options_class={model.options_class}
-                  key={"popover" + index}
-                  id={"popover" + index}
-                  big={model.size === "big"}
-                  target={{
-                    construct: ((outvar, value) => {
-                      // console.log("construct", outvar, value, options_data);
-                      options_data[outvar] = value;
-                    }),
-                    update: ((outvar, value) => {
-                      // console.log("update", outvar, value, options_data);
-                      if (outvar in options_data) options_data[outvar] = value;
-                      onCardUpdate();
-                    })
-                  }}
-              />) : null) }
-
-
-
-              {warning && model.showWarning &&  (
-                <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
                   <p className="rule warning">
                     <i>{warning.message}</i>
                   </p>
-                </div>
+                </div>)
-              )}
+              }
-            </div>
+              rootClose
+            >
+              <div className="progress-container warning">
+                {warning ?
+                  (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>) :
+                  (options && (
+                    <OptionsDialogPopup
+                      options={options}
+                      data={options_data}
+                      options_class={model.options_class}
+                      key={"popover" + index}
+                      id={"popover" + index}
+                      big={model.size === "big"}
+                      target={{
+                        construct: ((outvar, value) => {
+                          // console.log("construct", outvar, value, options_data);
+                          options_data[outvar] = value;
+                        }),
+                        update: ((outvar, value) => {
+                          // console.log("update", outvar, value, options_data);
+                          if (outvar in options_data) options_data[outvar] = value;
+                          onCardUpdate();
+                        })
+                      }}
+                    />
+                  ))
+                }
+              </div>
+            </OverlayTrigger>
 
             <h6>{model.name_number}</h6>
 
@@ -761,7 +734,7 @@ class ProductCartItem extends React.PureComponent {
               <OverlayTrigger
                 placement="top"
                 trigger={['click', 'hover', 'focus']}
-                overlay={render_progress}
+                overlay={({arrowProps, hasDoneInitialMeasure, show, ...props}) => (<div className="k-popup-connectors" {...props}>{render_progress}</div>)}
                 rootClose
               >
                 <div className="progress-container">
@@ -2451,8 +2424,7 @@ class Shop extends React.PureComponent {
                               itemHovered={currentItemHovered}
                               onToggleOverlayRemove={this.handleToggleOverlayRemove}
                               onClickRemoveItem={this.handleDeleteItem}
-                              onClickItem={this.handleShowOverlayRemove}>
+                              onClickItem={this.handleShowOverlayRemove}
-                              onClickRemoveItem={this.handleDeleteItem}
                               onCardUpdate={this.handleCardsUpdated}>
                           </Cart>
                         }