uypdate to ANTD 6

package.json

@@ -32,7 +32,7 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^6.0.0",
+    "@ant-design/icons": "^6.1.0",
     "@apollo/client": "^3.10.1",
     "@uiw/react-markdown-preview": "^5.1.5",
     "@uiw/react-md-editor": "^4.0.11",
@@ -69,7 +69,7 @@
     "@vitejs/plugin-react": "^4.3.1",
     "ajv": "^6.12.6",
     "ajv-keywords": "^3.5.2",
-    "antd": "^5.25.4",
+    "antd": "^6.3.1",
     "axios": "^1.6.8",
     "chonky": "^2.3.2",
     "chonky-icon-fontawesome": "^2.3.2",

src/Routes/Base/Header/AutoComplete/index.jsx

@@ -41,10 +41,10 @@ const AutoComplete = ({ className = '' }) => {
     <AutoCompleteLong
       className={className}
       options={tableData}
-      onSearch={handleFilter}
+      showSearch={{ onSearch: handleFilter }}
       onSelect={handleFilter}
       placeholder="Filter Entities 🎉"
-      dropdownMatchSelectWidth
+      popupMatchSelectWidth
       disabled={isDisabled}>
       <Input.Search allowClear />
     </AutoCompleteLong>

src/Routes/Base/Header/ExperimentPicker.react.jsx

@@ -131,6 +131,7 @@ const ExperimentPicker = () => {
   }, [
     experimentId,
     experiments,
+    getLazyExperiments,
     onAdd,
     onChange,
     onDescriptionChange,
@@ -156,7 +157,7 @@ const ExperimentPicker = () => {
     ] || COLOR.blueLight;
 
   return (
-    <Popover content={menu} overlayStyle={overflow} placement="bottomRight">
+    <Popover content={menu} styles={{ root: overflow }} placement="bottomRight">
       <BigTag color={tagColor}>{experimentId}</BigTag>
     </Popover>
   );

src/Routes/Base/SidebarLeft/MenuStyles.js

@@ -49,6 +49,6 @@ export const Name = styled.span`
 `;
 export const BadgeStyle = styled(Badge)`
   margin-top: 9px;
-  right: 16px;
+  right: 22px;
   position: absolute;
 `;

src/Routes/Base/SidebarLeft/index.jsx

@@ -146,8 +146,9 @@ const SidebarLeft = () => {
                 style={tagStyle}
                 color={
                   name === 'algorithms' &&
-                  instanceCounter.algorithmsUnscheduledReason > 0 &&
-                  'error'
+                  instanceCounter.algorithmsUnscheduledReason > 0
+                    ? 'error'
+                    : undefined
                 }>
                 {dataCount[name]}
               </Tag>

src/Routes/SidebarRight/AddAlgorithm/AddAlgorithmForm.react.jsx

@@ -60,12 +60,10 @@ const mainAdvancedOptions = Object.entries(formTemplate.main.options)
   .map(([key]) => key);
 
 const insertAlgorithmOptions = options =>
-  options.map((option, key) => (
-    // eslint-disable-next-line
-    <Select.Option key={key} value={option}>
-      {toUpperCaseFirstLetter(option)}
-    </Select.Option>
-  ));
+  options.map(option => ({
+    value: option,
+    label: toUpperCaseFirstLetter(option),
+  }));
 
 const toReadableBuildType = buildType => {
   let str = toUpperCaseFirstLetter(buildType);
@@ -451,13 +449,12 @@ const AddAlgorithmForm = ({
             name={splitByDot(MAIN.MEMORY.field)}
             label={MAIN.MEMORY.label}
             labelAlign="left">
-            <MemoryField>
-              {MAIN.MEMORY.types.map(valueItem => (
-                <Select.Option key={valueItem} value={valueItem}>
-                  {valueItem}
-                </Select.Option>
-              ))}
-            </MemoryField>
+            <MemoryField
+              options={MAIN.MEMORY.types.map(valueItem => ({
+                value: valueItem,
+                label: valueItem,
+              }))}
+            />
           </Form.Item>
         </Collapsible>
 
@@ -502,13 +499,14 @@ const AddAlgorithmForm = ({
             name={splitByDot(MAIN.RESERVE_MEMORY.field)}
             label={MAIN.RESERVE_MEMORY.label}
             labelAlign="left">
-            <MemoryField min={0} tooltipTitle={MAIN.RESERVE_MEMORY.tooltip}>
-              {MAIN.RESERVE_MEMORY.types.map(valueItem => (
-                <Select.Option key={valueItem} value={valueItem}>
-                  {valueItem}
-                </Select.Option>
-              ))}
-            </MemoryField>
+            <MemoryField
+              min={0}
+              tooltipTitle={MAIN.RESERVE_MEMORY.tooltip}
+              options={MAIN.RESERVE_MEMORY.types.map(valueItem => ({
+                value: valueItem,
+                label: valueItem,
+              }))}
+            />
           </Form.Item>
           <Form.Item
             name={splitByDot(MAIN.WORKERS.field)}
@@ -519,9 +517,11 @@ const AddAlgorithmForm = ({
             name={splitByDot(MAIN.OPTIONS.field)}
             label={MAIN.OPTIONS.label}
             initialValue={mainAdvancedOptions}>
-            <Select mode="tags" placeholder={MAIN.OPTIONS.placeholder}>
-              {insertAlgorithmOptions(MAIN.OPTIONS.types)}
-            </Select>
+            <Select
+              mode="tags"
+              placeholder={MAIN.OPTIONS.placeholder}
+              options={insertAlgorithmOptions(MAIN.OPTIONS.types)}
+            />
           </Form.Item>
         </Collapsible>
       </ContenerForm>

src/Routes/SidebarRight/AddAlgorithm/AlgorithmUploadFile.jsx

@@ -82,7 +82,7 @@ const AlgorithmUploadFile = ({ fileList, setFileList, isEdit }) => {
       {!isEdit && (
         <Alert
           style={marginTop}
-          message={`File ${fileList.length ? 'Uploaded' : 'Required'}`}
+          title={`File ${fileList.length ? 'Uploaded' : 'Required'}`}
           type={fileList.length ? 'info' : 'warning'}
           showIcon
         />

src/Routes/SidebarRight/AddAlgorithm/MemoryField.react.jsx

@@ -10,6 +10,7 @@ const selectStyle = { width: '90px' };
 const MemoryField = ({
   onChange,
   children,
+  options = null,
   value,
   tooltipTitle = undefined,
   min = 1,
@@ -24,12 +25,17 @@ const MemoryField = ({
     setUnit(unitInitial);
   }, [numberInitial, unitInitial]);
 
+  const childOptions = React.Children.toArray(children);
+  const optionsList =
+    options || childOptions.map(option => ({ value: option?.props?.value }));
+  const firstOptionValue = optionsList?.[0]?.value;
+
   const onNumber = target => {
     setNumberMem(target);
     if (target !== null && target !== '' && !Number.isNaN(target)) {
       onChange(`${target}${unit}`);
     } else {
-      onChange(`${min}${children[0].props.value}`); // default to min K if invalid input
+      onChange(`${min}${firstOptionValue || ''}`); // default to min K if invalid input
     }
   };
 
@@ -47,8 +53,12 @@ const MemoryField = ({
       <Space.Compact>
         {iconType && <Icon type={iconType} />}
         <InputNumber min={min} value={numberMem} onChange={onNumber} />
-        <Select style={selectStyle} value={unit} onChange={onSelect}>
-          {children}
+        <Select
+          style={selectStyle}
+          value={unit}
+          onChange={onSelect}
+          options={options}>
+          {!options && children}
         </Select>
       </Space.Compact>
     </Wrapper>
@@ -62,6 +72,7 @@ MemoryField.propTypes = {
   // TODO: detail the props
   /* eslint-disable */
   children: PropTypes.node,
+  options: PropTypes.arrayOf(PropTypes.shape({})),
   onChange: PropTypes.func,
   value: PropTypes.string,
   /* eslint-enable */

src/Routes/SidebarRight/AddAlgorithm/SelectEnvOptions.react.jsx

@@ -5,13 +5,16 @@ import addAlgorithmSchema from './schema';
 
 const SelectEnvOptions = forwardRef((props, ref) => (
   // eslint-disable-next-line
-  <Select ref={ref} {...props}>
-    {Object.entries(addAlgorithmSchema.ENV_TYPES).map(([key, value]) => (
-      <Select.Option key={key} value={key}>
-        {toUpperCaseFirstLetter(value)}
-      </Select.Option>
-    ))}
-  </Select>
+  <Select
+    ref={ref}
+    {...props}
+    options={Object.entries(addAlgorithmSchema.ENV_TYPES).map(
+      ([key, value]) => ({
+        value: key,
+        label: toUpperCaseFirstLetter(value),
+      })
+    )}
+  />
 ));
 
 SelectEnvOptions.propTypes = Select.propTypes;

src/Routes/SidebarRight/AddDataSource/index.jsx

@@ -137,7 +137,7 @@ const AddDataSource = () => {
           fileList={addedFiles}
           customRequest={customRequest}>
           <Alert
-            message={
+            title={
               addedFiles.length
                 ? addedFiles.length === 1
                   ? '1 file to upload'

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/Algorithms.jsx

@@ -31,9 +31,10 @@ const AlgorithmNode = ({ id }) => {
         <AutoComplete
           disabled={sortedAlgorithms?.length === 0}
           options={sortedAlgorithms}
-          filterOption={(inputValue, option) =>
-            option.value.indexOf(inputValue) !== -1
-          }
+          showSearch={{
+            filterOption: (inputValue, option) =>
+              option.value.indexOf(inputValue) !== -1,
+          }}
         />
       </Field>
       {isStreamingPipeline &&

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/DataSource.jsx

@@ -71,13 +71,13 @@ const DataSourceNode = ({ id }) => {
   return (
     <ctx.Provider value={contextValue}>
       <Field name={['name']} title="DataSource Name">
-        <Select disabled={collection && collection.length === 0}>
-          {collection.map(({ name }) => (
-            <Select.Option key={`nodes.${id}.spec.name_${name}`} value={name}>
-              {name}
-            </Select.Option>
-          ))}
-        </Select>
+        <Select
+          disabled={collection && collection.length === 0}
+          options={collection?.map(({ name }) => ({
+            value: name,
+            label: name,
+          }))}
+        />
       </Field>
 
       <RadioGroup value={mode} onChange={handleChangeMode}>
@@ -92,37 +92,39 @@ const DataSourceNode = ({ id }) => {
 
       {mode === MODES.SNAPSHOT ? (
         <Field name={['snapshot', 'name']} title="Snapshot Name">
-          <Select disabled={disableSnapshot} allowClear>
-            {snapshots?.map(entry => (
-              <Select.Option
-                key={`nodes.${id}.spec.version.${entry.id}`}
-                value={entry.name}>
+          <Select
+            disabled={disableSnapshot}
+            allowClear
+            options={snapshots?.map(entry => ({
+              value: entry.name,
+              label: (
                 <VersionRow
                   key={entry.id}
                   title={entry.name}
                   isLatest={false}
                   isSnapshot={false}
                 />
-              </Select.Option>
-            ))}
-          </Select>
+              ),
+            }))}
+          />
         </Field>
       ) : mode === MODES.VERSION ? (
         <Field name={['dataSource', 'id']} title="Version" skipValidation>
-          <Select disabled={disableVersions} allowClear>
-            {versionsCollection?.versions?.map(entry => (
-              <Select.Option
-                key={`nodes.${id}.spec.version.${entry.id}`}
-                value={entry.id}>
+          <Select
+            disabled={disableVersions}
+            allowClear
+            options={versionsCollection?.versions?.map(entry => ({
+              value: entry.id,
+              label: (
                 <VersionRow
                   key={entry.id}
                   title={entry.id}
                   isLatest={checkLatest(versionsCollection.versions, entry)}
                   isSnapshot={false}
                 />
-              </Select.Option>
-            ))}
-          </Select>
+              ),
+            }))}
+          />
         </Field>
       ) : null}
     </ctx.Provider>

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/Gateway.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Select, Input, InputNumber } from 'antd';
+import { Input, InputNumber } from 'antd';
 
 import useWizardContext from '../../useWizardContext';
 import { Field as RawField } from '../FormUtils';
@@ -52,15 +52,12 @@ const GatewayNode = ({ id }) => {
               ? initialState?.nodes[id]?.spec?.mem
               : '512Mi'
           }>
-          <MemoryField>
-            {memoryTypes.map(value => (
-              <Select.Option
-                value={value}
-                key={`nodes.${id}.memoryTypes.${value}`}>
-                {value}
-              </Select.Option>
-            ))}
-          </MemoryField>
+          <MemoryField
+            options={memoryTypes.map(value => ({
+              value,
+              label: value,
+            }))}
+          />
         </Field>
         <Field name={['cpu']} title="Cpu" initialValue={0.5} skipValidation>
           <InputNumber min={0} />