[deps]: remove ant-design/compatibility package (#1853)

## Which problem is this PR solving?
- part of: #1703

## Description of the changes
- This PR removes the ant-design compatibility package from the project
while keeping each component UI and UX as it was previously.

## How was this change tested?
- unit tests, and manually viewing each affected component.
- Since, this PR affects the Search Form, Search Trace Form, and Trace
Span Table View Filter Dropdowns, below is a screencast, showcasing the
affected UIs

[screen-capture
(5).webm](https://github.com/jaegertracing/jaeger-ui/assets/94157520/4ca44e36-4bf9-4135-a951-817f07df7260)

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `yarn lint` and `yarn test`

---------

Signed-off-by: Ansh Goyal <[email protected]>

packages/jaeger-ui/package.json

@@ -41,7 +41,6 @@
  "vite-plugin-imp": "^2.3.1"
  },
  "dependencies": {
- "@ant-design/compatible": "^1.1.2",
  "@jaegertracing/plexus": "0.2.0",
  "@pyroscope/flamegraph": "0.21.4",
  "@types/deep-freeze": "^0.1.1",

packages/jaeger-ui/src/components/App/TraceIDSearchInput.tsx

@@ -14,9 +14,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Form } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Input } from 'antd';
+import { Form, Input } from 'antd';
 import { IoSearch } from 'react-icons/io5';
 
 import { History } from 'history';
@@ -44,7 +42,7 @@ class TraceIDSearchInput extends React.PureComponent<Props> {
  <Form
  data-testid="TraceIDSearchInput--form"
  layout="horizontal"
- onSubmit={this.goToTrace}
+ onSubmitCapture={this.goToTrace}
  className="TraceIDSearchInput--form"
  >
  <Input

packages/jaeger-ui/src/components/SearchTracePage/SearchForm.jsx

@@ -14,9 +14,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Form } from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-import { Input, Button, Popover, Select, Row, Col } from 'antd';
+import { Input, Button, Popover, Select, Row, Col, Form } from 'antd';
 import _get from 'lodash/get';
 import logfmtParser from 'logfmt/lib/logfmt_parser';
 import { stringify as logfmtStringify } from 'logfmt/lib/stringify';
@@ -277,7 +275,7 @@ export class SearchFormImpl extends React.PureComponent {
  const tz = selectedLookback === 'custom' ? new Date().toTimeString().replace(/^.*?GMT/, 'UTC') : null;
 
  return (
- <Form layout="vertical" onSubmit={handleSubmit}>
+ <Form layout="vertical" onSubmitCapture={handleSubmit}>
  <FormItem
  label={
  <span>

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.test.js

@@ -43,7 +43,7 @@ describe('<TraceSpanView>', () => {
  expect(wrapper.find('colgroup').length).toBe(1);
  expect(wrapper.find('Pagination').length).toBe(2);
  expect(wrapper.find('Button').length).toBe(1);
- expect(wrapper.find('.ant-legacy-form-item-control').length).toBe(3);
+ expect(wrapper.find('.ant-form-item-control-input').length).toBe(3);
  });
  it('Should change value when onChange was called', () => {
  const event = ['service2'];

packages/jaeger-ui/src/components/TracePage/TraceSpanView/index.tsx

@@ -14,10 +14,9 @@
 // limitations under the License.
 
 import React, { Component } from 'react';
-import { Row, Col, Table, Button, Select } from 'antd';
+import { Row, Col, Table, Button, Select, Form } from 'antd';
 import dayjs from 'dayjs';
 import { ColumnProps } from 'antd/es/table';
-import { Form } from '@ant-design/compatible';
 import './index.css';
 import { TNil } from '../../../types';
 import { Trace, Span } from '../../../types/trace';