adds login modal to overview page

Author: Anisha1234

src/components/LoginHint/index.js

@@ -7,7 +7,7 @@ import { Title, Button } from '@patternfly/react-core';
   store,
   auth: auth.auth,
 }))
-class Overview extends Component {
+class LoginHint extends Component {
   navigateToAuth = () => {
     const { dispatch } = this.props;
     dispatch(routerRedux.push(`/auth`));
@@ -33,4 +33,4 @@ class Overview extends Component {
   }
 }
 
-export default Overview;
+export default LoginHint;

src/components/LoginModal/index.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  TextContent,
+  Text,
+  TextVariants,
+} from '@patternfly/react-core';
+import { routerRedux } from 'dva/router';
+import { connect } from 'dva';
+
+@connect(auth => ({
+  auth: auth.auth,
+}))
+class LoginModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isModalOpen: false,
+    };
+  }
+
+  componentDidMount() {
+    this.handleModalToggle();
+  }
+
+  handleModalToggle = () => {
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+  };
+
+  handleModalCancel = () => {
+    const { dispatch } = this.props;
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+    dispatch(routerRedux.push(`/`));
+  };
+
+  handleLoginModal = () => {
+    const { dispatch } = this.props;
+    this.setState(({ isModalOpen }) => ({
+      isModalOpen: !isModalOpen,
+    }));
+    dispatch(routerRedux.push(`/auth`));
+  };
+
+  render() {
+    const { isModalOpen } = this.state;
+
+    return (
+      <React.Fragment>
+        <Modal
+          variant={ModalVariant.small}
+          isOpen={isModalOpen}
+          onClose={this.handleModalCancel}
+          showClose="false"
+          actions={[
+            <Button key="confirm" variant="primary" onClick={this.handleLoginModal}>
+              Proceed
+            </Button>,
+            <Button key="cancel" variant="link" onClick={this.handleModalCancel}>
+              Cancel
+            </Button>,
+          ]}
+        >
+          <TextContent>
+            <Text component={TextVariants.h4}>
+              This action requires login. Please login to Pbench Dashboard to continue.
+            </Text>
+          </TextContent>
+        </Modal>
+      </React.Fragment>
+    );
+  }
+}
+
+export default LoginModal;

src/pages/Overview/index.less

@@ -76,8 +76,8 @@
 .dropdownContent {
   position: absolute;
   background-color: #f1f1f1;
-  margin-right: -2%;
-  min-width: 160px;
+  margin-left: -5%;
+  min-width: 130px;
   overflow: auto;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }

src/pages/PrivateRoute/index.js

@@ -1,21 +1,20 @@
 import React, { Component, Fragment } from 'react';
-import AuthLayout from '@/components/AuthLayout';
-import { routerRedux } from 'dva/router';
+// import AuthLayout from '@/components/AuthLayout';
+// import { routerRedux } from 'dva/router';
 import { connect } from 'dva';
+import LoginModal from '@/components/LoginModal';
 
 @connect(auth => ({
   auth: auth.auth,
 }))
 class PrivateRoute extends Component {
   render() {
-    const { children, auth, dispatch } = this.props;
+    const { children, auth } = this.props;
 
     if (auth.auth.username === 'admin') {
       return <Fragment>{children}</Fragment>;
     }
-
-    dispatch(routerRedux.push(`/auth`));
-    return <AuthLayout />;
+    return <LoginModal />;
   }
 }
 export default PrivateRoute;