Chore: replace calls to defaultProps (#87310)

* replace calls to defaultProps

* make linksGetter optional

packages/grafana-ui/src/components/FormField/FormField.tsx

@@ -17,11 +17,6 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
   interactive?: boolean;
 }
 
-const defaultProps = {
-  labelWidth: 6,
-  inputWidth: 12,
-};
-
 /**
  * Default form field including label used in Grafana UI. Default input element is simple <input />. You can also pass
  * custom inputEl if required in which case inputWidth and inputProps are ignored.
@@ -31,8 +26,8 @@ const defaultProps = {
 export const FormField = ({
   label,
   tooltip,
-  labelWidth,
+  labelWidth = 6,
-  inputWidth,
+  inputWidth = 12,
   inputEl,
   className,
   interactive,
@@ -57,7 +52,6 @@ export const FormField = ({
 };
 
 FormField.displayName = 'FormField';
-FormField.defaultProps = defaultProps;
 
 const getStyles = () => {
   return {

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -122,10 +122,6 @@ export const LayerDragDropList = <T extends LayerElement>({
   );
 };
 
-LayerDragDropList.defaultProps = {
-  isGroup: () => false,
-};
-
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     marginBottom: theme.spacing(2),

public/app/core/components/PageActionBar/PageActionBar.tsx

@@ -28,7 +28,7 @@ export default class PageActionBar extends PureComponent<Props> {
       placeholder = 'Search by name or type',
       sortPicker,
     } = this.props;
-    const linkProps: typeof LinkButton.defaultProps = { href: linkButton?.href, disabled: linkButton?.disabled };
+    const linkProps: Parameters<typeof LinkButton>[0] = { href: linkButton?.href, disabled: linkButton?.disabled };
 
     if (target) {
       linkProps.target = target;

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianKeyValues.tsx

@@ -94,13 +94,16 @@ export type AccordianKeyValuesProps = {
   interactive?: boolean;
   isOpen: boolean;
   label: string;
-  linksGetter: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
+  linksGetter?: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
   onToggle?: null | (() => void);
 };
 
+interface KeyValuesSummaryProps {
+  data?: TraceKeyValuePair[] | null;
+}
+
 // export for tests
-export function KeyValuesSummary(props: { data?: TraceKeyValuePair[] }) {
+export function KeyValuesSummary({ data = null }: KeyValuesSummaryProps) {
-  const { data } = props;
   const styles = useStyles2(getStyles);
 
   if (!Array.isArray(data) || !data.length) {
@@ -121,12 +124,16 @@ export function KeyValuesSummary(props: { data?: TraceKeyValuePair[] }) {
   );
 }
 
-KeyValuesSummary.defaultProps = {
+export default function AccordianKeyValues({
-  data: null,
+  className = null,
-};
+  data,
-
+  highContrast = false,
-export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
+  interactive = true,
-  const { className, data, highContrast, interactive, isOpen, label, linksGetter, onToggle } = props;
+  isOpen,
+  label,
+  linksGetter,
+  onToggle = null,
+}: AccordianKeyValuesProps) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const styles = useStyles2(getStyles);
   const iconCls = cx(alignIcon, { [styles.emptyIcon]: isEmpty });
@@ -166,10 +173,3 @@ export default function AccordianKeyValues(props: AccordianKeyValuesProps) {
     </div>
   );
 }
-
-AccordianKeyValues.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianLogs.tsx

@@ -65,7 +65,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 export type AccordianLogsProps = {
   interactive?: boolean;
   isOpen: boolean;
-  linksGetter: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
+  linksGetter?: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
   logs: TraceLog[];
   onItemToggle?: (log: TraceLog) => void;
   onToggle?: () => void;
@@ -73,8 +73,16 @@ export type AccordianLogsProps = {
   timestamp: number;
 };
 
-export default function AccordianLogs(props: AccordianLogsProps) {
+export default function AccordianLogs({
-  const { interactive, isOpen, linksGetter, logs, openedItems, onItemToggle, onToggle, timestamp } = props;
+  interactive = true,
+  isOpen,
+  linksGetter,
+  logs,
+  openedItems,
+  onItemToggle,
+  onToggle,
+  timestamp,
+}: AccordianLogsProps) {
   let arrow: React.ReactNode | null = null;
   let HeaderComponent: 'span' | 'a' = 'span';
   let headerProps: {} | null = null;
@@ -122,11 +130,3 @@ export default function AccordianLogs(props: AccordianLogsProps) {
     </div>
   );
 }
-
-AccordianLogs.defaultProps = {
-  interactive: true,
-  linksGetter: undefined,
-  onItemToggle: undefined,
-  onToggle: undefined,
-  openedItems: undefined,
-};

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/AccordianText.tsx

@@ -58,17 +58,17 @@ function DefaultTextComponent({ data }: { data: string[] }) {
   return <TextList data={data} />;
 }
 
-export default function AccordianText(props: AccordianTextProps) {
+export default function AccordianText({
-  const {
+  className = null,
-    className,
   data,
   headerClassName,
-    interactive,
+  highContrast = false,
+  interactive = true,
   isOpen,
   label,
-    onToggle,
+  onToggle = null,
   TextComponent = DefaultTextComponent,
-  } = props;
+}: AccordianTextProps) {
   const isEmpty = !Array.isArray(data) || !data.length;
   const accordianKeyValuesStyles = useStyles2(getAccordianKeyValuesStyles);
   const iconCls = cx(alignIcon, { [accordianKeyValuesStyles.emptyIcon]: isEmpty });
@@ -97,10 +97,3 @@ export default function AccordianText(props: AccordianTextProps) {
     </div>
   );
 }
-
-AccordianText.defaultProps = {
-  className: null,
-  highContrast: false,
-  interactive: true,
-  onToggle: null,
-};

public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -14,7 +14,7 @@
 
 import { css } from '@emotion/css';
 import cx from 'classnames';
-import * as React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
@@ -92,21 +92,23 @@ function parseIfComplexJson(value: unknown) {
   return value;
 }
 
-export const LinkValue = (props: { href: string; title?: string; children: React.ReactNode }) => {
+interface LinkValueProps {
+  href: string;
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const LinkValue = ({ href, title = '', children }: PropsWithChildren<LinkValueProps>) => {
   return (
-    <a href={props.href} title={props.title} target="_blank" rel="noopener noreferrer">
+    <a href={href} title={title} target="_blank" rel="noopener noreferrer">
-      {props.children} <Icon name="external-link-alt" />
+      {children} <Icon name="external-link-alt" />
     </a>
   );
 };
 
-LinkValue.defaultProps = {
-  title: '',
-};
-
 export type KeyValuesTableProps = {
   data: TraceKeyValuePair[];
-  linksGetter: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
+  linksGetter?: ((pairs: TraceKeyValuePair[], index: number) => TraceLink[]) | TNil;
 };
 
 export default function KeyValuesTable(props: KeyValuesTableProps) {

public/app/features/explore/TraceView/components/TraceTimelineViewer/Ticks.tsx

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

public/app/features/explore/TraceView/components/TraceTimelineViewer/TimelineRow.tsx

@@ -43,8 +43,7 @@ interface TimelineRowCellProps extends React.HTMLAttributes<HTMLDivElement> {
   style?: {};
 }
 
-export default function TimelineRow(props: TTimelineRowProps) {
+export default function TimelineRow({ children, className = '', ...rest }: TTimelineRowProps) {
-  const { children, className = '', ...rest } = props;
   const styles = useStyles2(getStyles);
   return (
     <div className={cx(styles.row, className)} {...rest}>
@@ -53,12 +52,7 @@ export default function TimelineRow(props: TTimelineRowProps) {
   );
 }
 
-TimelineRow.defaultProps = {
+export function TimelineRowCell({ children, className = '', width, style = {}, ...rest }: TimelineRowCellProps) {
-  className: '',
-};
-
-export function TimelineRowCell(props: TimelineRowCellProps) {
-  const { children, className = '', width, style, ...rest } = props;
   const widthPercent = `${width * 100}%`;
   const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent };
   const styles = useStyles2(getStyles);
@@ -69,6 +63,4 @@ export function TimelineRowCell(props: TimelineRowCellProps) {
   );
 }
 
-TimelineRowCell.defaultProps = { className: '', style: {} };
-
 TimelineRow.Cell = TimelineRowCell;

public/app/features/explore/TraceView/components/common/BreakableText.tsx

@@ -35,8 +35,7 @@ type Props = {
   wordRegexp?: RegExp;
 };
 
-export default function BreakableText(props: Props): React.ReactElement | null {
+export default function BreakableText({ text, className, wordRegexp = WORD_RX }: Props): React.ReactElement | null {
-  const { className, text, wordRegexp = WORD_RX } = props;
   const styles = useStyles2(getStyles);
   if (!text) {
     return null;
@@ -55,7 +54,3 @@ export default function BreakableText(props: Props): React.ReactElement | null {
   }
   return <>{spans}</>;
 }
-
-BreakableText.defaultProps = {
-  wordRegexp: WORD_RX,
-};

public/app/features/explore/TraceView/components/common/CopyIcon.tsx

@@ -41,24 +41,19 @@ type PropsType = {
   tooltipTitle: string;
 };
 
-export default function CopyIcon(props: PropsType) {
+export default function CopyIcon({ copyText, icon = 'copy', tooltipTitle }: PropsType) {
   const styles = useStyles2(getStyles);
 
   const [hasCopied, setHasCopied] = useState(false);
 
   const handleClick = () => {
-    navigator.clipboard.writeText(props.copyText);
+    navigator.clipboard.writeText(copyText);
     setHasCopied(true);
   };
 
   return (
-    <Tooltip content={hasCopied ? 'Copied' : props.tooltipTitle}>
+    <Tooltip content={hasCopied ? 'Copied' : tooltipTitle}>
-      <Button className={cx(styles.CopyIcon)} type="button" icon={props.icon} onClick={handleClick} />
+      <Button className={cx(styles.CopyIcon)} type="button" icon={icon} onClick={handleClick} />
     </Tooltip>
   );
 }
-
-CopyIcon.defaultProps = {
-  icon: 'copy',
-  className: undefined,
-};

public/app/features/explore/TraceView/components/common/NewWindowIcon.tsx

@@ -32,13 +32,8 @@ type Props = {
   className?: string;
 };
 
-export default function NewWindowIcon(props: Props) {
+export default function NewWindowIcon({ isLarge = false, className }: Props) {
-  const { isLarge, className, ...rest } = props;
   const styles = useStyles2(getStyles);
   const cls = cx({ [styles.NewWindowIconLarge]: isLarge }, className);
-  return <Icon className={cls} name={'anchor'} {...rest} />;
+  return <Icon className={cls} name={'anchor'} />;
 }
-
-NewWindowIcon.defaultProps = {
-  isLarge: false,
-};