Fix issue #2029: Replace defaultProps with JavaScript default parameters (#2106)

* updated basemodal

Updated the basemodal.tsx file by removing the  BaseModal.defaultProps block and including the default values directly within the function parameters.

* Removed DefaultProps from the files

Removed DefaultProps from the files:
AgentControlBar.tsx, ChatInput.tsx, ExplorerTree.tsx, TreeNode.tsx, IconButton.tsx, HeaderContent.tsx, AutocompleteCombobox.tsx

and replaced the usage of defaultProps with JavaScript default parameters in the given components.

* Removed comments and updated eslintrc

Removed all the comments (Removed the defaultProps block comment), and updated the ESLint rules to ignore the defaultProps warning thrown by ESLint.

* Finished Linting Succesfully.

Ran the lint command with the --fix and --write arg to fix all remaining issues and errors before pushing. Thanks a lot @amanape for the support!

---------

Co-authored-by: sp.wack <83104063+amanape@users.noreply.github.com>

frontend/.eslintrc

@@ -44,6 +44,7 @@
         }],
         // For https://stackoverflow.com/questions/55844608/stuck-with-eslint-error-i-e-separately-loops-should-be-avoided-in-favor-of-arra
         "no-restricted-syntax": "off",
+        "react/require-default-props": "off",
         "import/prefer-default-export": "off",
         "no-underscore-dangle": "off",
         "jsx-a11y/no-static-element-interactions": "off",

frontend/package-lock.json

@@ -9037,6 +9037,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
       "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",

frontend/src/components/AgentControlBar.tsx

@@ -41,7 +41,7 @@ function ActionButton({
   action,
   handleAction,
   children,
-  large,
+  large = false,
 }: React.PropsWithChildren<ButtonProps>): React.ReactNode {
   return (
     <Tooltip content={content} closeDelay={100}>
@@ -57,10 +57,6 @@ function ActionButton({
   );
 }
 
-ActionButton.defaultProps = {
-  large: false,
-};
-
 function AgentControlBar() {
   const { curAgentState } = useSelector((state: RootState) => state.agent);
   const [desiredState, setDesiredState] = React.useState(AgentState.INIT);

frontend/src/components/IconButton.tsx

@@ -12,7 +12,7 @@ function IconButton({
   icon,
   onClick,
   ariaLabel,
-  testId,
+  testId = "",
 }: IconButtonProps): React.ReactElement {
   return (
     <Button
@@ -28,8 +28,4 @@ function IconButton({
   );
 }
 
-IconButton.defaultProps = {
-  testId: "",
-};
-
 export default IconButton;

frontend/src/components/chat/ChatInput.tsx

@@ -10,7 +10,7 @@ interface ChatInputProps {
   onSendMessage: (message: string) => void;
 }
 
-function ChatInput({ disabled, onSendMessage }: ChatInputProps) {
+function ChatInput({ disabled = false, onSendMessage }: ChatInputProps) {
   const { t } = useTranslation();
 
   const [message, setMessage] = React.useState("");
@@ -70,8 +70,4 @@ function ChatInput({ disabled, onSendMessage }: ChatInputProps) {
   );
 }
 
-ChatInput.defaultProps = {
-  disabled: false,
-};
-
 export default ChatInput;

frontend/src/components/file-explorer/ExplorerTree.tsx

@@ -16,8 +16,4 @@ function ExplorerTree({ files, defaultOpen = false }: ExplorerTreeProps) {
   );
 }
 
-ExplorerTree.defaultProps = {
-  defaultOpen: false,
-};
-
 export default ExplorerTree;

frontend/src/components/file-explorer/TreeNode.tsx

@@ -94,8 +94,4 @@ function TreeNode({ path, defaultOpen = false }: TreeNodeProps) {
   );
 }
 
-TreeNode.defaultProps = {
-  defaultOpen: false,
-};
-
 export default React.memo(TreeNode);

frontend/src/components/modals/base-modal/BaseModal.tsx

@@ -24,9 +24,9 @@ function BaseModal({
   onOpenChange,
   title,
   isDismissable = true,
-  subtitle,
-  actions,
-  children,
+  subtitle = undefined,
+  actions = [],
+  children = null,
 }: BaseModalProps) {
   return (
     <Modal
@@ -60,11 +60,4 @@ function BaseModal({
   );
 }
 
-BaseModal.defaultProps = {
-  isDismissable: true,
-  subtitle: undefined,
-  actions: [],
-  children: null,
-};
-
 export default BaseModal;

frontend/src/components/modals/base-modal/HeaderContent.tsx

@@ -5,7 +5,10 @@ interface HeaderContentProps {
   subtitle?: string;
 }
 
-export function HeaderContent({ title, subtitle }: HeaderContentProps) {
+export function HeaderContent({
+  title,
+  subtitle = undefined,
+}: HeaderContentProps) {
   return (
     <>
       <h3>{title}</h3>
@@ -15,7 +18,3 @@ export function HeaderContent({ title, subtitle }: HeaderContentProps) {
     </>
   );
 }
-
-HeaderContent.defaultProps = {
-  subtitle: undefined,
-};

frontend/src/components/modals/settings/AutocompleteCombobox.tsx

@@ -77,8 +77,3 @@ export function AutocompleteCombobox({
     </Tooltip>
   );
 }
-
-AutocompleteCombobox.defaultProps = {
-  allowCustomValue: false,
-  disabled: false,
-};