[AccordianKeyValues]: replace defaultProps with destructuring (jaegertracing#2667)

## Which problem is this PR solving?
- Part of jaegertracing#2596


## Description of the changes
- removed defaultProps from AccordianKeyValues

## How was this change tested?
- npm ci
- npm test

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [ ] 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`: `npm run lint` and `npm run test`

---------

Signed-off-by: Abhishek <[email protected]>

Author: its-me-abhishek

Diff for: packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.test.js

@@ -55,14 +55,15 @@ describe('<KeyValuesSummary>', () => {
 
 describe('<AccordianKeyValues>', () => {
   let wrapper;
+  const mockToggle = jest.fn();
 
   const props = {
     compact: false,
     data: tags,
     highContrast: false,
     isOpen: false,
     label: 'le-label',
-    onToggle: jest.fn(),
+    onToggle: mockToggle,
   };
 
   beforeEach(() => {
@@ -74,6 +75,28 @@ describe('<AccordianKeyValues>', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
+  it('calls onToggle when clicked', () => {
+    wrapper.find('.AccordianKeyValues--header').simulate('click');
+    expect(mockToggle).toHaveBeenCalled();
+  });
+
+  it('does not call onToggle if interactive is false', () => {
+    mockToggle.mockClear();
+    wrapper.setProps({ interactive: false });
+    wrapper.update();
+    wrapper.find('.AccordianKeyValues--header').simulate('click');
+    expect(mockToggle).not.toHaveBeenCalled();
+  });
+
+  it('does not apply high contrast styles by default', () => {
+    expect(wrapper.find('.AccordianKeyValues--header').hasClass('is-high-contrast')).toBe(false);
+  });
+
+  it('applies high contrast styles when highContrast is true', () => {
+    wrapper.setProps({ highContrast: true });
+    expect(wrapper.find('.AccordianKeyValues--header').hasClass('is-high-contrast')).toBe(true);
+  });
+
   it('renders the label', () => {
     const header = wrapper.find(`[data-test="${markers.LABEL}"]`);
     expect(header.length).toBe(1);

Diff for: packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx

@@ -23,20 +23,8 @@ import { KeyValuePair, Link } from '../../../../types/trace';
 
 import './AccordianKeyValues.css';
 
-type AccordianKeyValuesProps = {
-  className?: string | TNil;
-  data: KeyValuePair[];
-  highContrast?: boolean;
-  interactive?: boolean;
-  isOpen: boolean;
-  label: string;
-  linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil;
-  onToggle?: null | (() => void);
-};
-
 // export for tests
-export function KeyValuesSummary(props: { data?: KeyValuePair[] }) {
-  const { data } = props;
+export function KeyValuesSummary({ data }: { data: KeyValuePair[] }) {
   if (!Array.isArray(data) || !data.length) {
     return null;
   }
@@ -55,12 +43,25 @@ export function KeyValuesSummary(props: { data?: KeyValuePair[] }) {
   );
 }
 
-KeyValuesSummary.defaultProps = {
-  data: null,
-};
-
-export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
-  const { className, data, highContrast, interactive, isOpen, label, linksGetter, onToggle } = props;
+export default function AccordianKeyValues({
+  className = null,
+  data,
+  highContrast = false,
+  interactive = true,
+  isOpen,
+  label,
+  linksGetter,
+  onToggle = null,
+}: {
+  className?: string | TNil;
+  data: KeyValuePair[];
+  highContrast?: boolean;
+  interactive?: boolean;
+  isOpen: boolean;
+  label: string;
+  linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil;
+  onToggle?: null | (() => void);
+}) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
   let arrow: React.ReactNode | null = null;
@@ -94,10 +95,3 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
     </div>
   );
 }
-
-AccordianKeyValues.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};