chore(deps): bump argo-ui and fix browser console errors

ui/package.json

@@ -8,7 +8,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "antd": "^5.4.2",
-        "argo-ui": "git+https://github.com/argoproj/argo-ui.git",
+        "argo-ui": "git+https://github.com/argoproj/argo-ui.git#5ff344ac9692c14dd108468bd3c020c3c75181cb",
         "classnames": "2.2.6",
         "isomorphic-fetch": "^3.0.0",
         "moment": "^2.29.4",
@@ -25,7 +25,7 @@
         "web-vitals": "^1.0.1"
     },
     "scripts": {
-        "start": "webpack serve --config ./src/app/webpack.dev.js",
+        "start": "NODE_OPTIONS=--openssl-legacy-provider webpack serve --config ./src/app/webpack.dev.js",
         "build": "rm -rf dist && NODE_OPTIONS=--openssl-legacy-provider webpack --config ./src/app/webpack.prod.js",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
@@ -60,6 +60,9 @@
         "@types/react-dom": "^16.9.3",
         "@types/react-helmet": "^6.1.0",
         "@types/react-router-dom": "^5.1.7",
+        "@types/react-form": "^2.16.1",
+        "@types/uuid": "^9.0.3",
+        "@types/react-autocomplete": "^1.8.4",
         "copy-webpack-plugin": "^6.3.2",
         "mini-css-extract-plugin": "^1.3.9",
         "raw-loader": "^4.0.2",

ui/src/app/components/confirm-button/confirm-button.tsx

@@ -13,7 +13,10 @@ interface ConfirmButtonProps extends ButtonProps {
 
 export const ConfirmButton = (props: ConfirmButtonProps) => {
     const [open, setOpen] = useState(false);
-    const [buttonProps, setButtonProps] = useState(props);
+
+    const {skipconfirm, ...coreButtonProps} = props;
+
+    const [buttonProps, setButtonProps] = useState(coreButtonProps);
 
     React.useEffect(() => {
         const tmp = {...props};

ui/src/app/components/rollouts-grid/rollouts-grid.tsx

@@ -45,9 +45,13 @@ export const RolloutsGrid = ({
 
         const updateItemsPerRow = () => {
             if (rolloutsGrid) {
+                const rolloutsListWidget = document.querySelector('.rollouts-list__widget');
+                if (!rolloutsListWidget) {
+                    return;
+                }
                 const containerWidth = rolloutsGrid.clientWidth;
-                const widgetWidth = parseInt(getComputedStyle(document.querySelector('.rollouts-list__widget')).getPropertyValue('width'), 10);
-                const widgetPadding = parseInt(getComputedStyle(document.querySelector('.rollouts-list__widget')).getPropertyValue('padding'), 10);
+                const widgetWidth = parseInt(getComputedStyle(rolloutsListWidget).getPropertyValue('width'), 10);
+                const widgetPadding = parseInt(getComputedStyle(rolloutsListWidget).getPropertyValue('padding'), 10);
                 const itemsPerRowValue = Math.floor(containerWidth / (widgetWidth + widgetPadding * 2));
                 setItemsPerRow(itemsPerRowValue);
             }

ui/src/app/components/rollouts-toolbar/rollouts-toolbar.tsx

@@ -53,8 +53,11 @@ export const RolloutsToolbar = ({
             Healthy: searchParams.get('Healthy') === 'true',
         },
     });
+
     // Ensure that the filters are updated when the URL changes
-    onFilterChange(filters);
+    React.useEffect(() => {
+        onFilterChange(filters);
+    }, [filters]);
 
     const handleFilterChange = (newFilters: Filters) => {
         setFilters(newFilters);
@@ -139,7 +142,7 @@ export const RolloutsToolbar = ({
                 [event.currentTarget.id]: !filters.status[event.currentTarget.id],
             },
         };
-        handleFilterChange(newFilters);        
+        handleFilterChange(newFilters);
     };
 
     const statusCounts: StatusCount = React.useMemo(() => {
@@ -217,18 +220,19 @@ export const RolloutsToolbar = ({
             <Tooltip
                 title={
                     'Filter by name or filter by label using syntax label:value. Include multiple terms by separating with comma. For example, "api,team:data". Surround in quotes for exact match.'
-                }
-            >
-                <AutoComplete
-                    className='rollouts-toolbar_search-container'
-                    placeholder='Filter by name or label tag:value'
-                    value={filters.name}
-                    onChange={handleNameFilterChange}
-                    onKeyDown={(event) => {
-                        event.stopPropagation(); // Prevents shift+H from opening the help menu
-                    }}
-                    ref={searchRef}
-                />
+                }>
+                <div>
+                    <AutoComplete
+                        className='rollouts-toolbar_search-container'
+                        placeholder='Filter by name or label tag:value'
+                        value={filters.name}
+                        onChange={handleNameFilterChange}
+                        onKeyDown={(event) => {
+                            event.stopPropagation(); // Prevents shift+H from opening the help menu
+                        }}
+                        ref={searchRef}
+                    />
+                </div>
             </Tooltip>
         </div>
     );

ui/src/app/webpack.common.js

@@ -36,6 +36,12 @@ const config = {
                 test: /\.css$/,
                 loader: 'style-loader!raw-loader',
             },
+            // https://github.com/fkhadra/react-toastify/issues/775#issuecomment-1149569290
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: "javascript/auto"
+            },
         ],
     },
     node: {

ui/tsconfig.json

@@ -2,13 +2,14 @@
     "compilerOptions": {
         "sourceMap": true,
         "noImplicitAny": true,
-        "module": "commonjs",
+        "module": "CommonJS",
         "target": "es6",
         "jsx": "react",
         "experimentalDecorators": true,
         "noUnusedLocals": true,
         "declaration": false,
-        "lib": ["es2017", "dom"]
+        "lib": ["es2017", "dom"],
+        "allowSyntheticDefaultImports": true
     },
     "include": ["./**/*"],
     "exclude": ["node_modules", "./**/*.test.ts", "./**/*.test.tsx"]