Merge branch 'development' of https://github.com/taban03/hackathon19 …

…into development * 'development' of https://github.com/taban03/hackathon19: Cleanup Add dropdown for version
taban03 · Oct 9, 2019 · 70fa936 · 70fa936
2 parents a5de055 + 6f50546
commit 70fa936
Show file tree

Hide file tree

Showing 20 changed files with 170 additions and 353 deletions.
diff --git a/frontend/src/actions/fetch-versions-actions.jsx b/frontend/src/actions/fetch-versions-actions.jsx
@@ -0,0 +1,37 @@
+import { ZOWE_VERSIONS_SUCCESS, ZOWE_VERSIONS_ERROR } from '../constants/zowe-versions-contants';
+
+
+export function fetchZoweVersionsSuccess(versions) {
+    return {
+        type: ZOWE_VERSIONS_SUCCESS,
+        versions: versions
+    };
+}
+
+export function fetchZoweVersionsError(error) {
+    return {
+        type: ZOWE_VERSIONS_ERROR,
+        error: error
+    }
+}
+
+export function fetchVersions() {
+    return dispatch => {
+        fetch('https://localhost:80/api/v1/ui/catalogs/versions')
+            .then(res => res.json())
+            .then(res => {
+                console.log(res)
+                if(res.error) {
+                    console.log("ERRRORE")
+                    throw(res.error);
+                }
+                dispatch(fetchZoweVersionsSuccess(res))
+                return res.versions;
+            })
+            .catch(error => {
+                dispatch(fetchZoweVersionsError(error));
+            })
+    }
+
+}
+
diff --git a/frontend/src/actions/user.actions.jsx b/frontend/src/actions/user.actions.jsx
diff --git a/frontend/src/assets/images/github.png b/frontend/src/assets/images/github.png
diff --git a/frontend/src/assets/images/zowe-catatalog-logo.png b/frontend/src/assets/images/zowe-catatalog-logo.png
diff --git a/frontend/src/components/Dashboard/Dashboard.jsx b/frontend/src/components/Dashboard/Dashboard.jsx
@@ -50,7 +50,7 @@ export default class Dashboard extends Component {
                         <div className="grid-container">
                             <div className="filtering-container">
                                 <Shield title="Search Bar is broken !">
-                                    <SearchCriteria placeholder="Search for APIs" doSearch={this.handleSearch} />
+                                    <SearchCriteria placeholder="Search for Zowe components" doSearch={this.handleSearch} />
                                 </Shield>
                                 <h2 className="api-heading">Available Zowe components</h2>
                             </div>

diff --git a/frontend/src/components/Header/Header.css b/frontend/src/components/Header/Header.css
@@ -1,8 +1,14 @@
 #logo {
     height: 48px;
     width: 48px;
+    background-color: transparent;
 }
 
+#logo2 {
+    height: 34px;
+    width: 34px;
+    background-color: transparent;
+}
 .product-name > a > .css-1un8gmf {
     align-self: center;
     margin-bottom: 0;
@@ -12,24 +18,26 @@
     text-decoration: none;
 }
 
-.logout-container button.css-1upkw8q-Button {
-    background-color: #1d5bbf;
-    transition: background-color .3s ease-in-out;
-}
-
-.logout-container button.css-1upkw8q-Button:hover {
-    background-color: #5691f0;
-}
-
-
 .logout-container svg {
-    transition: color .3s ease-in-out;
+    /*transition: color .3s ease-in-out;*/
 }
 
 .logout-container button.css-1upkw8q-Button:hover svg {
     color: #111111;
 }
 
+.header {
+    background-color: #ce3d3d;
+}
+
 .css-1i58psh:hover {
     background-color: #5691f0;
 }
+.dropdown {
+    height: 24px;
+    margin: -8px -157px;
+    position: absolute;
+}
+css-1b3gl36-Button {
+    height: 23px
+}
diff --git a/frontend/src/components/Header/Header.jsx b/frontend/src/components/Header/Header.jsx
@@ -1,46 +1,79 @@
 import React, { Component } from 'react';
-import { Button, Link, Text, Tooltip } from 'mineral-ui';
-import { IconPowerSettingsNew } from 'mineral-ui-icons';
-import productImage from '../../assets/images/api-catalog-logo.png';
+import { Link, Text, Dropdown, Button } from 'mineral-ui';
+
+import productImage from '../../assets/images/zowe-catatalog-logo.png';
+import githubImage from '../../assets/images/github.png';
 import './Header.css';
 
 export default class Header extends Component {
-    handleLogout = () => {
-        const { logout } = this.props;
-        logout();
-    };
+
+
+    // getVersions = () => {
+    //     fetch('https://localhost:80/api/v1/catalogs/versions')
+    //         .then(res => res.json())
+    //         .then((data) => {
+    //             this.setState({ versions: data })
+    //         })
+    // }
+    componentWillMount() {
+        const {fetchVersions} = this.props;
+        fetchVersions();
+        console.log(this.props)
+    }
 
     render() {
-        const iconLogout = <IconPowerSettingsNew color="white" />;
-        const dashboard = '/ui/v1/apicatalog/#/dashboard';
+        const dashboard = '/ui/v1/zowecatalog/#/dashboard';
+        const {versions, error} = this.props;
+        // const  text  = {...versions.version};
+        // for (i = 0; i < versions.length; i++)
+        //     const text =
+        // versions.text = versions.version;
+        const data = versions.map(o => ({text: o.version}));
+
+        console.log(data)
+        // const {data, text = versions.map(o => ({text: o.version}))} = versions;
+        // const data =
+        //     [
+        //         {
+        //             text: versions,
+        //             // onClick: event => { console.log(event); }
+        //         }
+        //     ]
+        console.log("VERSIONEEEE")
+        // console.log(data)
         return (
             <div className="header">
                 <div className="product-name">
                     <Link href={dashboard}>
                         <div className="app-icon-container">
-                            <img id="logo" alt="API Catalog Product Name" src={productImage} />
+                            <img id="logo" alt="Zowe Catalog Product Name" src={productImage} />
                         </div>
                     </Link>
                     <Link href={dashboard}>
                         <Text element="h3" color="#ffffff">
-                            API Catalog
+                            Zowe Components Catalog
                         </Text>
                     </Link>
                 </div>
                 <div className="right-icons">
+                    <div className="dropdown">
+                        <Dropdown data={data}>
+                            <Button>Zowe Versions</Button>
+                        </Dropdown>
+                    </div>
+                    <div className="icons-container">
+                        <Link href="https://www.zowe.org">
+                            <img id="logo2" alt="Zowe Catalog Product Name" src={productImage} />
+                        </Link>
+                    </div>
                     <div className="logout-container">
-                        <Tooltip content="Logout">
-                            <Button
-                                iconStart={iconLogout}
-                                data-testid="logout"
-                                primary
-                                circular
-                                onClick={this.handleLogout}
-                            />
-                        </Tooltip>
+                        <Link href="https://github.com/zowe">
+                            <img id="logo2" alt="Zowe Catalog GitHub Icon" src={githubImage} />
+                        </Link>
                     </div>
                 </div>
             </div>
         );
     }
 }
+
diff --git a/frontend/src/components/Header/HeaderContainer.jsx b/frontend/src/components/Header/HeaderContainer.jsx
@@ -1,14 +1,27 @@
 import { connect } from 'react-redux';
-import { userActions } from '../../actions/user.actions';
 import Header from './Header';
+import {
+    fetchZoweVersionsSuccess,
+    fetchZoweVersionsError,
+    fetchVersions
+} from '../../actions/fetch-versions-actions';
+import {getVisibleTiles} from '../../selectors/selectors';
 
-const mapStateToProps = () => ({});
+const mapStateToProps = state => ({
+    versions: state.zoweVersionsReducer.versions,
+    error: state.zoweVersionsReducer.error,
+});
 
 const mapDispatchToProps = {
-    logout: () => userActions.logout(),
-};
+    fetchZoweVersionsSuccess,
+    fetchZoweVersionsError,
+    fetchVersions,
+}
 
 export default connect(
     mapStateToProps,
-    mapDispatchToProps
+    mapDispatchToProps,
 )(Header);
+
+
+
diff --git a/frontend/src/constants/zowe-versions-contants.jsx b/frontend/src/constants/zowe-versions-contants.jsx
@@ -0,0 +1,3 @@
+// eslint-disable-next-line import/prefer-default-export
+export const ZOWE_VERSIONS_SUCCESS = 'ZOWE_VERSIONS_SUCCESS';
+export const ZOWE_VERSIONS_ERROR = 'ZOWE_VERSIONS_ERROR';
diff --git a/frontend/src/epics/fetch-tiles.jsx b/frontend/src/epics/fetch-tiles.jsx
@@ -4,7 +4,6 @@ import { ofType } from 'redux-observable';
 import { catchError, debounceTime, exhaustMap, map, mergeMap, retryWhen, takeUntil } from 'rxjs/operators';
 import { FETCH_TILES_REQUEST, FETCH_TILES_STOP } from '../constants/catalog-tile-constants';
 import { fetchTilesFailed, fetchTilesRetry, fetchTilesSuccess } from '../actions/catalog-tile-actions';
-import { userActions } from '../actions/user.actions';
 
 const updatePeriod = Number(process.env.REACT_APP_STATUS_UPDATE_PERIOD);
 const debounce = Number(process.env.REACT_APP_STATUS_UPDATE_DEBOUNCE);
@@ -123,9 +122,7 @@ export const fetchTilesPollingEpic = (action$, store, { ajax, scheduler }) =>
         ),
         takeUntil(action$.ofType(FETCH_TILES_STOP)),
         catchError(error => {
-          if (error.status === 401 || error.status === 403) {
-            return of(userActions.authenticationFailure(error));
-          }
+
           return of(fetchTilesFailed(error));
         })
       )

diff --git a/frontend/src/reducers/index.jsx b/frontend/src/reducers/index.jsx
@@ -5,14 +5,16 @@ import loadingReducer from './loading-reducer';
 import errorReducer from './error-reducer';
 import authenticationReducer from './authentication.reducer';
 import selectedServiceReducer from './selected-service-reducer';
+import zoweVersionsReducer from './zowe-versions-reducer';
 
 const reducers = {
-  filtersReducer,
-  tilesReducer,
-  loadingReducer,
-  errorReducer,
-  authenticationReducer,
-  selectedServiceReducer,
+    filtersReducer,
+    tilesReducer,
+    loadingReducer,
+    errorReducer,
+    authenticationReducer,
+    selectedServiceReducer,
+    zoweVersionsReducer,
 };
 
 // eslint-disable-next-line import/prefer-default-export

diff --git a/frontend/src/reducers/zowe-versions-reducer.jsx b/frontend/src/reducers/zowe-versions-reducer.jsx
@@ -0,0 +1,29 @@
+import { ZOWE_VERSIONS_SUCCESS, ZOWE_VERSIONS_ERROR } from '../constants/zowe-versions-contants';
+
+
+const dropDownDefaultState = {
+    versions: [],
+};
+
+export const zoweVersionsReducer = (state = dropDownDefaultState, action) => {
+    console.log(action.type)
+    switch (action.type) {
+        case ZOWE_VERSIONS_SUCCESS:
+            console.log("SUCCESSSSSOO")
+            return {
+                ...state,
+                versions: action.versions
+            }
+        case ZOWE_VERSIONS_ERROR:
+            console.log("ERROR")
+            return {
+                ...state,
+                error: action.error
+            }
+        default:
+            console.log("DEFAULT")
+            return state;
+    }
+}
+
+export default zoweVersionsReducer;