chore(web): support for defaultProps will be removed in react warning (#5561)

Author: emosbaugh

web/src/components/AirgapUploadProgress.jsx

@@ -74,8 +74,8 @@ class AirgapUploadProgress extends Component {
 
   render() {
     const {
-      total,
-      progress,
+      total = 0,
+      progress = 0,
       resuming,
       onProgressError,
       onProgressSuccess,
@@ -345,9 +345,5 @@ class AirgapUploadProgress extends Component {
   }
 }
 
-AirgapUploadProgress.defaultProps = {
-  total: 0,
-  progress: 0,
-};
 
 export default AirgapUploadProgress;

web/src/components/shared/CodeSnippet.jsx

@@ -25,16 +25,9 @@ class CodeSnippet extends Component {
     dataTestId: PropTypes.string,
   };
 
-  static defaultProps = {
-    variant: "plain",
-    language: "bash",
-    copyText: "Copy command",
-    onCopyText: "Copied!",
-    copyDelay: 3000,
-  };
 
   copySnippet = () => {
-    const { children, copyDelay } = this.props;
+    const { children, copyDelay = 3000 } = this.props;
     const textToCopy = Array.isArray(children) ? children.join("\n") : children;
 
     if (navigator.clipboard && window.isSecureContext) {
@@ -88,12 +81,12 @@ class CodeSnippet extends Component {
     const {
       className,
       children,
-      language,
+      language = "bash",
       preText,
       canCopy,
-      copyText,
-      onCopyText,
-      variant,
+      copyText = "Copy command",
+      onCopyText = "Copied!",
+      variant = "plain",
       trimWhitespace = true,
       dataTestId,
     } = this.props;

web/src/components/shared/PaperIcon/PaperIcon.jsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import "@src/scss/components/shared/PaperIcon.scss";
 
 export default function PaperIcon(props) {
-  const { iconClass, className, onClick, height, width } = props;
+  const { iconClass, className, onClick, height = "25px", width = "25px" } = props;
 
   return (
     <div
@@ -20,7 +20,3 @@ export default function PaperIcon(props) {
   );
 }
 
-PaperIcon.defaultProps = {
-  height: "25px",
-  width: "25px",
-};

web/src/components/shared/SideBar/SideBar.tsx

@@ -6,16 +6,12 @@ import "@src/scss/components/shared/SideBar.scss";
 
 interface Props {
   className?: string;
-  items: (JSX.Element | undefined)[];
+  items?: (JSX.Element | undefined)[];
   loading?: boolean;
 }
 class SideBar extends Component<Props> {
-  static defaultProps = {
-    items: [],
-  };
-
   render() {
-    const { className, items, loading } = this.props;
+    const { className, items = [], loading } = this.props;
 
     if (loading) {
       return (

web/src/components/shared/SubNavBar/SubNavBar.jsx

@@ -8,7 +8,7 @@ import subNavConfig from "@src/config-ui/subNavConfig";
 export default function SubNavBar({
   className,
   activeTab,
-  app,
+  app = {},
   isVeleroInstalled,
   isAccess = false,
   isSnapshots = false,
@@ -143,10 +143,6 @@ export default function SubNavBar({
   );
 }
 
-SubNavBar.defaultProps = {
-  app: {},
-};
-
 SubNavBar.propTypes = {
   className: PropTypes.string,
   activeTab: PropTypes.string,

web/src/components/shared/TabView/TabView.jsx

@@ -24,13 +24,8 @@ export default class TabView extends Component {
     onTabChange: PropTypes.func,
   };
 
-  static defaultProps = {
-    separator: "|",
-    onTabChange: () => {},
-  };
-
   setTab = (name) => {
-    const { onTabChange } = this.props;
+    const { onTabChange = () => {} } = this.props;
 
     this.setState(
       {
@@ -41,7 +36,7 @@ export default class TabView extends Component {
   };
 
   render() {
-    const { className, children, separator } = this.props;
+    const { className, children, separator = "|" } = this.props;
     const { currentTab } = this.state;
     const childToRender = Children.toArray(children).find(
       (child) => child.props.name === currentTab

web/src/components/shared/Tooltip.jsx

@@ -12,13 +12,9 @@ export default class Tooltip extends Component {
     minWidth: PropTypes.string,
   };
 
-  static defaultProps = {
-    position: "top-center",
-    minWidth: "80",
-  };
 
   render() {
-    const { className, visible, text, content, position, minWidth } =
+    const { className, visible, text, content, position = "top-center", minWidth = "80" } =
       this.props;
 
     const wrapperClass = `Tooltip-wrapper tooltip-${position} ${

web/src/components/snapshots/SnapshotStorageDestination.tsx

@@ -336,11 +336,6 @@ class SnapshotStorageDestination extends Component<Props, State> {
     };
   }
 
-  static defaultProps = {
-    snapshotSettings: {
-      store: {},
-    },
-  };
 
   componentDidMount() {
     if (this.props.snapshotSettings && !this.props.checkForVeleroAndNodeAgent) {

web/src/features/Dashboard/components/AirgapUploadProgress.jsx

@@ -74,8 +74,8 @@ class AirgapUploadProgress extends Component {
 
   render() {
     const {
-      total,
-      progress,
+      total = 0,
+      progress = 0,
       resuming,
       onProgressError,
       onProgressSuccess,
@@ -345,9 +345,5 @@ class AirgapUploadProgress extends Component {
   }
 }
 
-AirgapUploadProgress.defaultProps = {
-  total: 0,
-  progress: 0,
-};
 
 export default AirgapUploadProgress;