Fixed reactstrap 9 deprecated warnings

src/common/Home.tsx

@@ -29,7 +29,7 @@ const Home = ({ servers }: HomeProps) => {
   return (
     <div className="home">
       <Card className="home__main-card">
-        <Row noGutters>
+        <Row className="g-0">
           <div className="col-md-5 d-none d-md-block">
             <div className="home__logo-wrapper">
               <div className="home__logo">

src/servers/ServersDropdown.tsx

@@ -42,7 +42,7 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
       <DropdownToggle nav caret>
         <FontAwesomeIcon icon={serverIcon} /> <span className="ms-1">Servers</span>
       </DropdownToggle>
-      <DropdownMenu right style={{ right: 0 }}>{renderServers()}</DropdownMenu>
+      <DropdownMenu end style={{ right: 0 }}>{renderServers()}</DropdownMenu>
     </UncontrolledDropdown>
   );
 };

src/utils/DropdownBtn.tsx

@@ -22,7 +22,7 @@ export const DropdownBtn: FC<DropdownBtnProps> = (
   return (
     <Dropdown isOpen={isOpen} toggle={toggle} disabled={disabled} className={dropdownClassName}>
       <DropdownToggle caret className={toggleClasses} color="primary">{text}</DropdownToggle>
-      <DropdownMenu className="w-100" right={right} style={style}>{children}</DropdownMenu>
+      <DropdownMenu className="w-100" end={right} style={style}>{children}</DropdownMenu>
     </Dropdown>
   );
 };

src/utils/DropdownBtnMenu.tsx

@@ -15,6 +15,6 @@ export const DropdownBtnMenu: FC<DropdownBtnMenuProps> = ({ isOpen, toggle, chil
     <DropdownToggle size="sm" caret outline className="dropdown-btn-menu__dropdown-toggle">
       &nbsp;<FontAwesomeIcon icon={menuIcon} />&nbsp;
     </DropdownToggle>
-    <DropdownMenu right={right}>{children}</DropdownMenu>
+    <DropdownMenu end={right}>{children}</DropdownMenu>
   </ButtonDropdown>
 );

src/utils/Message.tsx

@@ -37,7 +37,7 @@ const Message: FC<MessageProps> = ({ className, children, loading = false, type
   });
 
   return (
-    <Row noGutters className={className}>
+    <Row className={classNames('g-0', className)}>
       <div className={classes}>
         <Card className={getClassForType(type)} body>
           <h3 className={classNames('text-center mb-0', getTextClassForType(type))}>

src/utils/OrderingDropdown.tsx

@@ -35,7 +35,7 @@ export function OrderingDropdown<T extends string = string>(
         {isButton && order.field && `Order by: "${items[order.field]}" - "${order.dir ?? 'DESC'}"`}
       </DropdownToggle>
       <DropdownMenu
-        right={right}
+        end={right}
         className={classNames('w-100', { 'ordering-dropdown__menu--link': !isButton })}
       >
         {toPairs(items).map(([ fieldKey, fieldValue ]) => (

src/utils/PaginationDropdown.tsx

@@ -9,10 +9,8 @@ interface PaginationDropdownProps {
 
 const PaginationDropdown = ({ toggleClassName, ranges, value, setValue }: PaginationDropdownProps) => (
   <UncontrolledDropdown>
-    <DropdownToggle caret color="link" className={toggleClassName}>
-      Paginate
-    </DropdownToggle>
-    <DropdownMenu right>
+    <DropdownToggle caret color="link" className={toggleClassName}>Paginate</DropdownToggle>
+    <DropdownMenu end>
       {ranges.map((itemsPerPage) => (
         <DropdownItem key={itemsPerPage} active={itemsPerPage === value} onClick={() => setValue(itemsPerPage)}>
           <b>{itemsPerPage}</b> items per page

src/visits/charts/LineChartCard.tsx

@@ -237,7 +237,7 @@ const LineChartCard = (
             <DropdownToggle caret color="link" className="btn-sm p-0">
               Group by
             </DropdownToggle>
-            <DropdownMenu right>
+            <DropdownMenu end>
               {Object.entries(STEPS_MAP).map(([ value, menuText ]) => (
                 <DropdownItem key={value} active={step === value} onClick={() => setStep(value as Step)}>
                   {menuText}

src/visits/helpers/OpenMapModalBtn.tsx

@@ -42,7 +42,7 @@ const OpenMapModalBtn = ({ modalTitle, activeCities, locations = [] }: OpenMapMo
       </button>
       <UncontrolledTooltip placement="left" target={(() => buttonRef.current) as any}>Show in map</UncontrolledTooltip>
       <Dropdown isOpen={dropdownIsOpened} toggle={toggleDropdown} inNavbar>
-        <DropdownMenu right>
+        <DropdownMenu end>
           <DropdownItem onClick={openMapWithLocations(false)}>Show all locations</DropdownItem>
           <DropdownItem onClick={openMapWithLocations(true)}>Show locations in current page</DropdownItem>
         </DropdownMenu>

test/utils/DropdownBtnMenu.test.tsx

@@ -43,6 +43,6 @@ describe('<DropdownBtnMenu />', () => {
   ])('renders menu to right when expected', (right, expectedRight) => {
     const wrapper = createWrapper({ right });
 
-    expect(wrapper.find(DropdownMenu).prop('right')).toEqual(expectedRight);
+    expect(wrapper.find(DropdownMenu).prop('end')).toEqual(expectedRight);
   });
 });

test/utils/Message.test.tsx

@@ -59,6 +59,6 @@ describe('<Message />', () => {
   it.each([{ className: 'foo' }, { className: 'bar' }, {}])('renders provided classes', ({ className }) => {
     const wrapper = createWrapper({ className });
 
-    expect(wrapper.prop('className')).toEqual(className);
+    expect(wrapper.prop('className')).toEqual(`g-0${className ? ` ${className}` : ''}`);
   });
 });