Merge pull request #63 from vitalragaz/Links_Refactoring

Links Refactoring to support middle mouseclick

src/containers/PageRoot.tsx

@@ -14,6 +14,7 @@ import { Button, Col, Layout, Menu, Row } from 'antd'
 import React, { Fragment, RefObject } from 'react'
 import { connect } from 'react-redux'
 import { Route, RouteComponentProps, Switch } from 'react-router'
+import { Link } from 'react-router-dom'
 import ApiManager from '../api/ApiManager'
 import { IVersionInfo } from '../models/IVersionInfo'
 import * as GlobalActions from '../redux/actions/GlobalActions'
@@ -171,10 +172,6 @@ class PageRoot extends ApiComponent<
         )
     }
 
-    onSelectMenu(key: string) {
-        this.props.history.push(`/${key}`)
-    }
-
     toggleSider = () => {
         StorageHelper.setSiderCollapsedStateInLocalStorage(
             !this.state.collapsed
@@ -289,20 +286,20 @@ class PageRoot extends ApiComponent<
                             selectedKeys={[
                                 this.props.location.pathname.substring(1),
                             ]}
-                            onSelect={(param) => {
-                                this.onSelectMenu(`${param.key}`)
-                            }}
                             theme="dark"
                             mode="inline"
                             defaultSelectedKeys={['dashboard']}
                             style={{ height: '100%', borderRight: 0 }}
                         >
                             {MENU_ITEMS.map((item) => (
                                 <Menu.Item key={item.key}>
-                                    <span>
+                                    <Link
+                                        to={`/${item.key}`}
+                                        className="nav-text"
+                                    >
                                         {item.icon}
                                         <span>{item.name}</span>
-                                    </span>
+                                    </Link>
                                 </Menu.Item>
                             ))}
 

src/containers/apps/Apps.tsx

@@ -29,10 +29,6 @@ export default class Apps extends ApiComponent<
         }
     }
 
-    onCreateOneClickAppClicked() {
-        this.props.history.push(`/apps/oneclick/`)
-    }
-
     onCreateNewAppClicked(appName: string, hasPersistentData: boolean) {
         const self = this
 
@@ -76,9 +72,6 @@ export default class Apps extends ApiComponent<
                     ) => {
                         self.onCreateNewAppClicked(appName, hasPersistency)
                     }}
-                    onCreateOneClickAppClicked={() => {
-                        self.onCreateOneClickAppClicked()
-                    }}
                 />
                 <div style={{ height: 25 }} />
                 {apiData.appDefinitions.length > 0 ? (

src/containers/apps/AppsTable.tsx

@@ -10,9 +10,9 @@ import { ColumnProps } from 'antd/lib/table'
 import { History } from 'history'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { IMobileComponent } from '../../models/ContainerProps'
 import Logger from '../../utils/Logger'
-import ClickableLink from '../global/ClickableLink'
 import NewTabLink from '../global/NewTabLink'
 import Timestamp from '../global/Timestamp'
 import { IAppDef } from './AppDefinition'
@@ -34,8 +34,8 @@ class AppsTable extends Component<
         this.state = { searchTerm: '' }
     }
 
-    onAppClicked(appName: string) {
-        this.props.history.push(`/apps/details/${appName}`)
+    appDetailPath(appName: string) {
+        return `/apps/details/${appName}`
     }
 
     createColumns(): ColumnProps<TableData>[] {
@@ -47,11 +47,7 @@ class AppsTable extends Component<
                 dataIndex: 'appName',
                 key: 'appName',
                 render: (appName: string) => (
-                    <ClickableLink
-                        onLinkClicked={() => self.onAppClicked(appName)}
-                    >
-                        {appName}
-                    </ClickableLink>
+                    <Link to={this.appDetailPath(appName)}>{appName}</Link>
                 ),
                 sorter: (a, b) => {
                     return a.appName
@@ -226,15 +222,13 @@ class AppsTable extends Component<
                                             title={appName}
                                             key={appName}
                                             extra={
-                                                <ClickableLink
-                                                    onLinkClicked={() =>
-                                                        self.onAppClicked(
-                                                            appName
-                                                        )
-                                                    }
+                                                <Link
+                                                    to={this.appDetailPath(
+                                                        appName
+                                                    )}
                                                 >
                                                     Details
-                                                </ClickableLink>
+                                                </Link>
                                             }
                                             style={{
                                                 width: '100%',

src/containers/apps/CreateNewApp.tsx

@@ -3,12 +3,12 @@ import { Button, Card, Checkbox, Col, Input, Row, Tooltip } from 'antd'
 import Search from 'antd/lib/input/Search'
 import React, { Component, Fragment } from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { IMobileComponent } from '../../models/ContainerProps'
 import NewTabLink from '../global/NewTabLink'
 
 interface MyProps {
     onCreateNewAppClicked: (appName: string, hasPersistency: boolean) => void
-    onCreateOneClickAppClicked: () => void
 }
 
 class CreateNewApp extends Component<
@@ -29,11 +29,6 @@ class CreateNewApp extends Component<
             this.state.hasPersistency
         )
     }
-
-    onCreateOneClickAppClicked() {
-        this.props.onCreateOneClickAppClicked()
-    }
-
     render() {
         const self = this
 
@@ -113,13 +108,9 @@ class CreateNewApp extends Component<
                         <br />
                         <div style={{ textAlign: 'center' }}>
                             <p>Or Select From</p>
-                            <Button
-                                onClick={() =>
-                                    self.onCreateOneClickAppClicked()
-                                }
-                            >
+                            <Link to="/apps/oneclick/" className="ant-btn">
                                 One-Click Apps/Databases
-                            </Button>
+                            </Link>
                         </div>
                     </Card>
                 </Col>

src/containers/apps/oneclick/selector/OneClickAppSelector.tsx

@@ -149,15 +149,10 @@ export default class OneClickAppSelector extends ApiComponent<
 
         return (
             <OneClickGrid
-                onAppSelectionChanged={(appName, baseDomain) => {
+                onAppSelectionChanged={(event, appName) => {
                     if (appName === TEMPLATE_ONE_CLICK_APP) {
+                        event.preventDefault()
                         self.setState({ isCustomTemplateSelected: true })
-                    } else {
-                        self.props.history.push(
-                            `/apps/oneclick/${appName}?baseDomain=${encodeURIComponent(
-                                baseDomain
-                            )}`
-                        )
                     }
                 }}
                 oneClickAppList={self.state.oneClickAppList!}

src/containers/apps/oneclick/selector/OneClickGrid.tsx

@@ -5,6 +5,7 @@ import {
 } from '@ant-design/icons'
 import { Card, Empty, Input, Row, Tooltip } from 'antd'
 import React, { Component, Fragment } from 'react'
+import { Link } from 'react-router-dom'
 import { IHashMapGeneric } from '../../../../models/IHashMapGeneric'
 import { IOneClickAppIdentifier } from '../../../../models/IOneClickAppModels'
 import StringSimilarity from '../../../../utils/StringSimilarity'
@@ -13,7 +14,10 @@ import NewTabLink from '../../../global/NewTabLink'
 export default class OneClickGrid extends Component<
     {
         oneClickAppList: IOneClickAppIdentifier[]
-        onAppSelectionChanged: (appName: string, baseDomain: string) => void
+        onAppSelectionChanged: (
+            event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
+            appName: string
+        ) => void
     },
     { sortScores: IHashMapGeneric<number>; selectedApp: string | undefined }
 > {
@@ -53,21 +57,32 @@ export default class OneClickGrid extends Component<
 
     createOneClickApp(app: IOneClickAppIdentifier) {
         const self = this
+        // For template selection set uri to #
+        const url =
+            app.name && app.baseUrl
+                ? `/apps/oneclick/${app.name}?baseDomain=${encodeURIComponent(
+                      app.baseUrl
+                  )}`
+                : '#'
         return (
             <div key={app.name + app.baseUrl} className="one-click-app-card">
-                <Card
-                    onClick={() =>
-                        this.props.onAppSelectionChanged(app.name, app.baseUrl)
+                <Link
+                    to={url}
+                    onClick={(event) =>
+                        this.props.onAppSelectionChanged(event, app.name)
                     }
-                    cover={<img src={app.logoUrl} alt="App logo" />}
-                    hoverable
                 >
-                    <Card.Meta
-                        title={app.displayName}
-                        description={app.description}
-                    />
-                    {self.create3rdPartyTagIfNeeded(app)}
-                </Card>
+                    <Card
+                        cover={<img src={app.logoUrl} alt="App logo" />}
+                        hoverable
+                    >
+                        <Card.Meta
+                            title={app.displayName}
+                            description={app.description}
+                        />
+                        {self.create3rdPartyTagIfNeeded(app)}
+                    </Card>
+                </Link>
             </div>
         )
     }