Fix deprecated imports

Signed-off-by: Mihaela Balutoiu <mbalutoiu@cloudbasesolutions.com>

src/components/modules/DashboardModule/DashboardActivity/DashboardActivity.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from "react";
 import { observer } from "mobx-react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import StatusIcon from "@src/components/ui/StatusComponents/StatusIcon";
 import StatusImage from "@src/components/ui/StatusComponents/StatusImage";

src/components/modules/DashboardModule/DashboardInfoCount/DashboardInfoCount.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { observer } from "mobx-react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import StatusImage from "@src/components/ui/StatusComponents/StatusImage";
 

src/components/modules/DashboardModule/DashboardTopEndpoints/DashboardTopEndpoints.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from "react";
 import { observer } from "mobx-react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import Button from "@src/components/ui/Button";
 import StatusImage from "@src/components/ui/StatusComponents/StatusImage";

src/components/modules/DetailsModule/DetailsContentHeader/DetailsContentHeader.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { observer } from "mobx-react";
 import styled from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import StatusPill from "@src/components/ui/StatusComponents/StatusPill";
 import ActionDropdown from "@src/components/ui/Dropdowns/ActionDropdown";

src/components/modules/DetailsModule/DetailsPageHeader/DetailsPageHeader.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled from "styled-components";
 import { observer } from "mobx-react";
 

src/components/modules/EndpointModule/EndpointDetailsContent/EndpointDetailsContent.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled from "styled-components";
 
 import { Field as FieldType } from "@src/@types/Field";

src/components/modules/MinionModule/MinionEndpointModal/MinionEndpointModal.tsx

@@ -15,7 +15,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { observer } from "mobx-react";
 import styled from "styled-components";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 
 import Modal from "@src/components/ui/Modal";
 import { Providers, ProviderTypes } from "@src/@types/Providers";
@@ -67,10 +67,10 @@ const ProviderWrapper = styled.div`
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  &.providers-group-transition-leave {
+  &.providers-group-transition-exit {
     opacity: 1;
   }
-  &.providers-group-transition-leave-active {
+  &.providers-group-transition-exit-active {
     opacity: 0.01;
     transition: opacity 250ms ease-out;
   }
@@ -197,13 +197,13 @@ class MinionEndpointModal extends React.Component<Props, State> {
 
     return (
       <ContentWrapper>
-        <CSSTransitionGroup
-          transitionName="providers-group-transition"
-          transitionLeave
-          transitionEnter
-          transitionLeaveTimeout={250}
-          transitionEnterTimeout={250}
+        <CSSTransition
+          classNames="providers-group-transition"
+          exit
+          enter
+          timeout={{ exit: 250, enter: 250 }}
         >
+        <div>
           {availableProviders.map(providerName => (
             <ProviderWrapper key={providerName}>
               <EndpointLogos
@@ -230,7 +230,8 @@ class MinionEndpointModal extends React.Component<Props, State> {
               />
             </ProviderWrapper>
           ))}
-        </CSSTransitionGroup>
+          </div>
+        </CSSTransition>
       </ContentWrapper>
     );
   }

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMachines.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import * as React from "react";
 import { Collapse } from "react-collapse";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled, { createGlobalStyle, css } from "styled-components";
 
 import { DeploymentItem, TransferItem, ActionItem } from "@src/@types/MainItem";

src/components/modules/MinionModule/MinionPoolDetailsContent/MinionPoolMainDetails.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled, { css } from "styled-components";
 
 import fieldHelper from "@src/@types/Field";

src/components/modules/NavigationModule/DetailsNavigation/DetailsNavigation.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { observer } from "mobx-react";
 import styled from "styled-components";
 

src/components/modules/NavigationModule/Navigation/Navigation.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React, { CSSProperties } from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { observer } from "mobx-react";
 import styled from "styled-components";
 import autobind from "autobind-decorator";

src/components/modules/ProjectModule/ProjectDetailsContent/ProjectDetailsContent.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from "mobx-react";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled, { css } from "styled-components";
 
 import { ThemePalette, ThemeProps } from "@src/components/Theme";

src/components/modules/TransferModule/MainDetails/MainDetails.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled, { css } from "styled-components";
 
 import fieldHelper from "@src/@types/Field";

src/components/modules/UserModule/UserDetailsContent/UserDetailsContent.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { observer } from "mobx-react";
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import styled from "styled-components";
 
 import { ThemePalette, ThemeProps } from "@src/components/Theme";

src/components/modules/WizardModule/WizardOptions/WizardOptions.tsx

@@ -16,7 +16,7 @@ import autobind from "autobind-decorator";
 import { toJS } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { CSSTransitionGroup } from "react-transition-group";
+import { CSSTransition } from "react-transition-group";
 import styled from "styled-components";
 
 import { MinionPool } from "@src/@types/MinionPool";
@@ -575,15 +575,14 @@ class WizardOptions extends React.Component<Props> {
           const getColumnInGroup = (field: any, fieldIndex: number) =>
             g.name ? fieldIndex % 2 : field.column;
           return (
-            <CSSTransitionGroup
+            <CSSTransition
               key={g.name || 0}
-              transitionName={i > 0 ? "field-group-transition" : ""}
-              transitionAppear
-              transitionEnterTimeout={250}
-              transitionAppearTimeout={250}
-              transitionLeaveTimeout={250}
+              classNames={i > 0 ? "field-group-transition" : ""}
+              appear
+              timeout={{ exit: 250, enter: 250, appear: 250 }}
               in={false}
             >
+            <div>
               <Group>
                 {g.name ? (
                   <GroupName>
@@ -605,7 +604,8 @@ class WizardOptions extends React.Component<Props> {
                   </Column>
                 </GroupFields>
               </Group>
-            </CSSTransitionGroup>
+              </div>
+            </CSSTransition>
           );
         })}
       </Fields>

src/components/ui/Dropdowns/NewItemDropdown/NewItemDropdown.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { observer } from "mobx-react";
 import styled from "styled-components";
 import autobind from "autobind-decorator";

src/components/ui/Dropdowns/NotificationDropdown/NotificationDropdown.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import autobind from "autobind-decorator";

src/components/ui/Dropdowns/UserDropdown/UserDropdown.tsx

@@ -13,7 +13,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import { observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import autobind from "autobind-decorator";

src/components/ui/Logo/Logo.tsx

@@ -14,7 +14,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import styled, { css } from "styled-components";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 import { ThemeProps } from "@src/components/Theme";
 import coriolisLargeImage from "./images/coriolis-large.svg";

src/plugins/metal/ContentPlugin.tsx

@@ -19,7 +19,7 @@ import type { Field } from "@src/@types/Field";
 
 import { Endpoint, Validation } from "@src/@types/Endpoint";
 import { ThemePalette } from "@src/components/Theme";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 import {
   Wrapper,
   renderFields,