Updated remaining ant design deprecations and removed some unused code

Author: jjoderis

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/use-colors.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
+import { RefObject, useCallback, useEffect, useRef } from 'react';
 
 import { ColorOptions, flowElementsStyling } from './instance-coloring';
 import { InstanceInfo } from '@/lib/engines/deployment';

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/use-instance-variables.tsx

@@ -1,11 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { getProcessIds, getVariablesFromElementById } from '@proceed/bpmn-helper';
 import { DeployedProcessInfo, InstanceInfo, VersionInfo } from '@/lib/engines/deployment';
-import {
-  ProcessVariable,
-  ProcessVariableSchema,
-  textFormatMap,
-} from '@/lib/process-variable-schema';
+import { ProcessVariable, ProcessVariableSchema } from '@/lib/process-variable-schema';
 
 export type Variable = {
   name: string;

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/page.tsx

@@ -6,8 +6,6 @@ import { getUsersFavourites } from '@/lib/data/users';
 import { getDeployedProcessesFromSavedEngines } from '@/lib/engines/saved-engines-helpers';
 import { DeployedProcessInfo } from '@/lib/engines/deployment';
 import { isUserErrorResponse } from '@/lib/user-error';
-import { Skeleton } from 'antd';
-import { Suspense } from 'react';
 import { getDbEngines } from '@/lib/data/db/engines';
 
 function getDeploymentNames<T extends { versions: DeployedProcessInfo['versions'] }>(

src/management-system-v2/app/(dashboard)/[environmentId]/iam/roles/role-page.tsx

@@ -1,13 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import {
-  DeleteOutlined,
-  InfoCircleOutlined,
-  // UnorderedListOutlined,
-  // AppstoreOutlined,
-  PlusOutlined,
-} from '@ant-design/icons';
+import { DeleteOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Space, Button, Breakpoint, Grid, FloatButton, Tooltip, App, TableProps } from 'antd';
 import { CloseOutlined } from '@ant-design/icons';
 import HeaderActions from './header-actions';

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/aas-config-content.tsx

@@ -224,7 +224,7 @@ const AasContent: React.FC<MachineDataViewProps> = ({
       `}</style>
 
       <Space
-        direction="vertical"
+        orientation="vertical"
         style={{
           display: 'flex',
           width: '100%',

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/aas-config-editor.tsx

@@ -97,6 +97,7 @@ import { useCollapseItems } from './aas-config-editor-collapse';
 import LanguageDropdown from './language-dropdown';
 import { Localization } from '@/lib/data/locale';
 import PreviewFeatureModal from '../preview-feature-modal';
+import { Without } from '@dnd-kit/utilities';
 const { Text } = Typography;
 
 type MachineDataViewProps = {
@@ -218,8 +219,10 @@ const AasConfigEditor: React.FC<MachineDataViewProps> = ({
 
   // TODO use FuzzySearch
   // currently only ignores capitalization
-  const filterOption: SelectProps['filterOption'] = (input, option) =>
-    ((option?.label as string) ?? '').toLowerCase().includes(input.toLowerCase());
+  const filterOption: Exclude<SelectProps['showSearch'], undefined | boolean>['filterOption'] = (
+    input,
+    option,
+  ) => ((option?.label as string) ?? '').toLowerCase().includes(input.toLowerCase());
 
   const setUserPreferences = useUserPreferences.use.addPreferences();
   const openTreeItemsInConfigs = useUserPreferences.use['tech-data-open-tree-items']();
@@ -1422,9 +1425,8 @@ const AasConfigEditor: React.FC<MachineDataViewProps> = ({
                   <Select
                     popupMatchSelectWidth={false}
                     placeholder="Select Version"
-                    showSearch
+                    showSearch={{ filterOption }}
                     loading={loadingVersions}
-                    filterOption={filterOption}
                     style={{ minWidth: '150px' }}
                     value={selectedVersionId || 'latest'}
                     onChange={handleVersionSelect}
@@ -1580,7 +1582,7 @@ const AasConfigEditor: React.FC<MachineDataViewProps> = ({
                   }
                 }}
                 trigger={['click']}
-                dropdownRender={() => (
+                popupRender={() => (
                   <div
                     style={{
                       background: '#fff',

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/aas-create-parameter-modal.tsx

@@ -556,14 +556,14 @@ const ParameterInputs = ({
           >
             <Select
               size="small"
-              showSearch
+              showSearch={{
+                filterSort: (optionA, optionB) =>
+                  (optionA?.label ?? '')
+                    .toLowerCase()
+                    .localeCompare((optionB?.label ?? '').toLowerCase()),
+                optionFilterProp: 'label',
+              }}
               placeholder="Search to Select"
-              optionFilterProp="label"
-              filterSort={(optionA, optionB) =>
-                (optionA?.label ?? '')
-                  .toLowerCase()
-                  .localeCompare((optionB?.label ?? '').toLowerCase())
-              }
               options={languageItemsSelect}
               value={currentDisplayLanguage}
               onChange={handleDisplayLanguageChange}
@@ -613,14 +613,14 @@ const ParameterInputs = ({
           >
             <Select
               size="small"
-              showSearch
               placeholder="Search to Select"
-              optionFilterProp="label"
-              filterSort={(optionA, optionB) =>
-                (optionA?.label ?? '')
-                  .toLowerCase()
-                  .localeCompare((optionB?.label ?? '').toLowerCase())
-              }
+              showSearch={{
+                filterSort: (optionA, optionB) =>
+                  (optionA?.label ?? '')
+                    .toLowerCase()
+                    .localeCompare((optionB?.label ?? '').toLowerCase()),
+                optionFilterProp: 'label',
+              }}
               options={languageItemsSelect}
               value={currentDescriptionLanguage}
               onChange={handleDescriptionLanguageChange}
@@ -771,14 +771,11 @@ const ParameterInputs = ({
                   }
                   treeDefaultExpandAll={true}
                   treeExpandAction="click"
-                  showSearch={true}
-                  treeNodeFilterProp="title"
-                  dropdownStyle={{ maxHeight: 600, overflow: 'auto' }}
+                  showSearch={{ treeNodeFilterProp: 'title' }}
+                  styles={{ popup: { root: { maxHeight: 600, overflow: 'auto' } } }}
                   virtual={false}
                   onChange={handleLinkedParametersChange}
-                  onDropdownVisibleChange={(open) => {
-                    setIsTreeSelectOpen(open);
-                  }}
+                  onOpenChange={(open) => setIsTreeSelectOpen(open)}
                   onKeyDown={(e) => {
                     if (e.key === 'Escape' && isTreeSelectOpen) {
                       e.stopPropagation();

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/aas-parameter-links.tsx

@@ -163,7 +163,11 @@ const AasParamLinks: React.FC<CustomFieldProps> = ({
   return (
     <>
       <>
-        <Divider style={{ margin: '0px 0px 10px 0px', fontSize: '0.8rem' }} orientation="left">
+        <Divider
+          style={{ margin: '0px 0px 10px 0px', fontSize: '0.8rem' }}
+          orientation="horizontal"
+          titlePlacement="left"
+        >
           Linked Parameters
         </Divider>
         {editable && (

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/aas-parameter-nests.tsx

@@ -184,7 +184,11 @@ const AasParamNests: React.FC<MachineDataViewProps> = ({
 
   return (
     <>
-      <Divider style={{ margin: '10px 0px', fontSize: '0.8rem' }} orientation="left">
+      <Divider
+        style={{ margin: '10px 0px', fontSize: '0.8rem' }}
+        orientation="horizontal"
+        titlePlacement="left"
+      >
         Nested Parameters
       </Divider>
       <Table<Parameter>

src/management-system-v2/app/(dashboard)/[environmentId]/machine-config/[configId]/language-dropdown.tsx

@@ -11,16 +11,16 @@ type LanguageDropdownProps = {
 const LanguageDropdown = ({ currentLanguage, onLanguageChange }: LanguageDropdownProps) => {
   return (
     <Select
-      showSearch
+      showSearch={{
+        optionFilterProp: 'label',
+        filterOption: (input, option) =>
+          (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
+      }}
       value={currentLanguage}
       onChange={onLanguageChange}
       options={languageItemsSelect}
       style={{ width: 195 }}
       placeholder="Select Language"
-      optionFilterProp="label"
-      filterOption={(input, option) =>
-        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
-      }
       labelRender={(props) => (
         <Space size={8} style={{ maxWidth: '150px', overflow: 'hidden' }}>
           <GlobalOutlined style={{ color: 'black' }} />