Changed all

Signed-off-by: cs-308-2023 <[email protected]>

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

@@ -262,12 +262,12 @@ export class SearchFormImpl extends React.PureComponent {
   render() {
     const {
       handleSubmit,
-      invalid,
+      invalid = false,
       searchMaxLookback,
-      selectedLookback,
-      selectedService = '-',
-      services,
-      submitting: disabled,
+      selectedLookback = null,
+      selectedService = null,
+      services = [],
+      submitting = false,
     } = this.props;
     const selectedServicePayload = services.find(s => s.name === selectedService);
     const opsForSvc = (selectedServicePayload && selectedServicePayload.operations) || [];
@@ -555,14 +555,6 @@ SearchFormImpl.propTypes = {
   selectedLookback: PropTypes.string,
 };
 
-SearchFormImpl.defaultProps = {
-  invalid: false,
-  services: [],
-  submitting: false,
-  selectedService: null,
-  selectedLookback: null,
-};
-
 export const searchSideBarFormSelector = formValueSelector('searchSideBar');
 
 export function mapStateToProps(state) {

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ScatterPlot.jsx

@@ -23,9 +23,11 @@ import { ONE_MILLISECOND, formatDuration } from '../../../utils/date';
 import 'react-vis/dist/style.css';
 import './ScatterPlot.css';
 
-export default function ScatterPlot(props) {
-  const { data, onValueClick, calculateContainerWidth } = props;
-
+export default function ScatterPlot({
+  data,
+  onValueClick,
+  calculateContainerWidth = container => container.clientWidth,
+}) {
   const containerRef = useRef(null);
   const [containerWidth, setContainerWidth] = useState(0);
 
@@ -103,8 +105,3 @@ ScatterPlot.propTypes = {
   onValueClick: PropTypes.func.isRequired,
   calculateContainerWidth: PropTypes.func,
 };
-
-ScatterPlot.defaultProps = {
-  // JSDOM does not, as of 2023, have a layout engine, so allow tests to supply a mock width as a workaround.
-  calculateContainerWidth: container => container.clientWidth,
-};

packages/jaeger-ui/src/components/TraceDiff/TraceDiffHeader/TraceHeader.tsx

@@ -75,8 +75,15 @@ export function Attrs(props: AttrsProps) {
   );
 }
 
-export default function TraceHeader(props: Props) {
-  const { duration, error, startTime, state, traceID, totalSpans, traceName } = props;
+export default function TraceHeader({
+  duration,
+  error = undefined,
+  startTime,
+  state,
+  traceID,
+  totalSpans,
+  traceName,
+}: Props) {
   const AttrsComponent = state === fetchedState.DONE ? Attrs : EmptyAttrs;
 
   return (
@@ -101,7 +108,3 @@ export default function TraceHeader(props: Props) {
     </div>
   );
 }
-
-TraceHeader.defaultProps = {
-  error: undefined,
-};

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

@@ -35,8 +35,7 @@ type AccordianKeyValuesProps = {
 };
 
 // export for tests
-export function KeyValuesSummary(props: { data?: KeyValuePair[] }) {
-  const { data } = props;
+export function KeyValuesSummary({ data = null }: { data?: KeyValuePair[] | null }) {
   if (!Array.isArray(data) || !data.length) {
     return null;
   }
@@ -55,12 +54,16 @@ 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,
+}: AccordianKeyValuesProps) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
   let arrow: React.ReactNode | null = null;
@@ -94,10 +97,3 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
     </div>
   );
 }
-
-AccordianKeyValues.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx

@@ -27,16 +27,24 @@ import './AccordianLogs.css';
 type AccordianLogsProps = {
   interactive?: boolean;
   isOpen: boolean;
-  linksGetter: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil;
+  linksGetter?: ((pairs: KeyValuePair[], index: number) => Link[]) | TNil; // Optional
   logs: Log[];
   onItemToggle?: (log: Log) => void;
   onToggle?: () => void;
   openedItems?: Set<Log>;
   timestamp: number;
 };
 
-export default function AccordianLogs(props: AccordianLogsProps) {
-  const { interactive, isOpen, linksGetter, logs, openedItems, onItemToggle, onToggle, timestamp } = props;
+export default function AccordianLogs({
+  interactive = true,
+  isOpen,
+  linksGetter,
+  logs,
+  openedItems = undefined,
+  onItemToggle = undefined,
+  onToggle = undefined,
+  timestamp,
+}: AccordianLogsProps) {
   let arrow: React.ReactNode | null = null;
   let HeaderComponent: 'span' | 'a' = 'span';
   let headerProps: object | null = null;
@@ -84,11 +92,3 @@ export default function AccordianLogs(props: AccordianLogsProps) {
     </div>
   );
 }
-
-AccordianLogs.defaultProps = {
-  interactive: true,
-  linksGetter: undefined,
-  onItemToggle: undefined,
-  onToggle: undefined,
-  openedItems: undefined,
-};

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/AccordianText.tsx

@@ -31,8 +31,16 @@ type AccordianTextProps = {
   onToggle?: null | (() => void);
 };
 
-export default function AccordianText(props: AccordianTextProps) {
-  const { className, data, headerClassName, highContrast, interactive, isOpen, label, onToggle } = props;
+export default function AccordianText({
+  className = null,
+  data,
+  headerClassName,
+  highContrast = false,
+  interactive = true,
+  isOpen,
+  label,
+  onToggle = null,
+}: AccordianTextProps) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const iconCls = cx('u-align-icon', { 'AccordianKeyValues--emptyIcon': isEmpty });
 
@@ -64,10 +72,3 @@ export default function AccordianText(props: AccordianTextProps) {
     </div>
   );
 }
-
-AccordianText.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -116,16 +116,20 @@ function formatValue(key: string, value: any) {
   return <div className="ub-inline-block">{content}</div>;
 }
 
-export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => (
-  <a href={props.href} title={props.title} target="_blank" rel="noopener noreferrer">
-    {props.children} <IoOpenOutline className="KeyValueTable--linkIcon" />
+export const LinkValue = ({
+  href,
+  title = '',
+  children,
+}: {
+  href: string;
+  title?: string;
+  children: React.ReactNode;
+}) => (
+  <a href={href} title={title} target="_blank" rel="noopener noreferrer">
+    {children} <IoOpenOutline className="KeyValueTable--linkIcon" />
   </a>
 );
 
-LinkValue.defaultProps = {
-  title: '',
-};
-
 const linkValueList = (links: Link[]) => {
   const dropdownItems = links.map(({ text, url }, index) => ({
     label: <LinkValue href={url}>{text}</LinkValue>,

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/Ticks.tsx

@@ -26,9 +26,7 @@ type TicksProps = {
   startTime?: number | TNil;
 };
 
-export default function Ticks(props: TicksProps) {
-  const { endTime, numTicks, showLabels, startTime } = props;
-
+export default function Ticks({ endTime = null, numTicks, showLabels = null, startTime = null }: TicksProps) {
   let labels: undefined | string[];
   if (showLabels) {
     labels = [];
@@ -57,9 +55,3 @@ export default function Ticks(props: TicksProps) {
   }
   return <div className="Ticks">{ticks}</div>;
 }
-
-Ticks.defaultProps = {
-  endTime: null,
-  showLabels: null,
-  startTime: null,
-};

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/TimelineRow.tsx

@@ -28,21 +28,15 @@ interface ITimelineRowCellProps extends React.HTMLAttributes<HTMLDivElement> {
   style?: object;
 }
 
-export default function TimelineRow(props: TTimelineRowProps) {
-  const { children, className = '', ...rest } = props;
+export default function TimelineRow({ children, className = '', ...rest }: TTimelineRowProps) {
   return (
     <div className={`flex-row ${className}`} {...rest}>
       {children}
     </div>
   );
 }
 
-TimelineRow.defaultProps = {
-  className: '',
-};
-
-function TimelineRowCell(props: ITimelineRowCellProps) {
-  const { children, className = '', width, style, ...rest } = props;
+function TimelineRowCell({ children, className = '', width, style = {}, ...rest }: ITimelineRowCellProps) {
   const widthPercent = `${width * 100}%`;
   const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent };
   return (
@@ -52,6 +46,4 @@ function TimelineRowCell(props: ITimelineRowCellProps) {
   );
 }
 
-TimelineRowCell.defaultProps = { className: '', style: {} };
-
 TimelineRow.Cell = TimelineRowCell;

packages/jaeger-ui/src/components/common/BreakableText.tsx

@@ -24,7 +24,7 @@ type Props = {
   wordRegexp?: RegExp;
 };
 
-export default function BreakableText({className,text = 'BreakableText',wordRegexp = WORD_RX}: Props) {
+export default function BreakableText({ className, text = 'BreakableText', wordRegexp = WORD_RX }: Props) {
   if (!text) {
     return typeof text === 'string' ? text : null;
   }

packages/jaeger-ui/src/components/common/ErrorMessage.tsx

@@ -70,10 +70,12 @@ export function Message({
   return msg;
 }
 
-
-export function Details(props: SubPartProps) {
-  const { className, error, wrap, wrapperClassName } = props;
-
+export function Details({
+  className = undefined,
+  error,
+  wrap = false,
+  wrapperClassName = undefined,
+}: SubPartProps) {
   if (typeof error === 'string') {
     return null;
   }
@@ -112,17 +114,11 @@ export function Details(props: SubPartProps) {
   return details;
 }
 
-Details.defaultProps = {
-  className: undefined,
-  wrap: false,
-  wrapperClassName: undefined,
-};
-
 export default function ErrorMessage({
-  className,
-  detailClassName,
+  className = undefined,
+  detailClassName = undefined,
   error,
-  messageClassName,
+  messageClassName = undefined,
 }: ErrorMessageProps) {
   if (!error) {
     return null;
@@ -139,9 +135,3 @@ export default function ErrorMessage({
     </div>
   );
 }
-
-ErrorMessage.defaultProps = {
-  className: undefined,
-  detailClassName: undefined,
-  messageClassName: undefined,
-};

packages/jaeger-ui/src/components/common/LoadingIndicator.tsx

@@ -40,4 +40,4 @@ export default function LoadingIndicator({
     ${className || ''}
   `;
   return <LuLoader2 className={cls} {...rest} />;
-}
+}

packages/jaeger-ui/src/components/common/NewWindowIcon.tsx

@@ -22,12 +22,7 @@ type Props = {
   isLarge?: boolean;
 };
 
-export default function NewWindowIcon(props: Props) {
-  const { isLarge, ...rest } = props;
+export default function NewWindowIcon({ isLarge = false, ...rest }: Props) {
   const cls = cx('NewWindowIcon', { 'is-large': isLarge });
   return <IoOpenOutline className={cls} {...rest} data-testid="NewWindowIcon" />;
 }
-
-NewWindowIcon.defaultProps = {
-  isLarge: false,
-};

packages/plexus/src/zoom/MiniMap.tsx

@@ -81,8 +81,8 @@ function getClassNames(props: TProps) {
   };
 }
 
-export function MiniMap(props: TProps) {
-  const css = getClassNames(props);
+export function MiniMap({ className = '', classNamePrefix = 'plexus', ...props }: TProps) {
+  const css = getClassNames({ className, classNamePrefix, ...props });
   const mapSize = getMapSize(props);
   const activeXform = getViewTransform(props, mapSize);
   return (
@@ -103,9 +103,4 @@ export function MiniMap(props: TProps) {
   );
 }
 
-MiniMap.defaultProps = {
-  className: '',
-  classNamePrefix: 'plexus',
-};
-
 export default React.memo(MiniMap);