Update Marquez Stylesheets (#122)

* Adding a global stylesheet and new header. Preparing to revise search and remove dependency. Signed-off-by: Peter Hicks <peter@datakin.com> * Adding the new theme and making it dark. Signed-off-by: Peter Hicks <peter@datakin.com> * Migrating the search bar experience. Signed-off-by: Peter Hicks <peter@datakin.com> * Removing old search experience. Signed-off-by: Peter Hicks <peter@datakin.com> * Updating pagination and some styling details. Signed-off-by: Peter Hicks <peter@datakin.com> * Adding in new font packages to the application. Signed-off-by: Peter Hicks <peter@datakin.com> * Retrofitting in new text component. Signed-off-by: Peter Hicks <peter@datakin.com> * Fixing the font in the search bar. Signed-off-by: Peter Hicks <peter@datakin.com> * Fixing container elements on the pages. Signed-off-by: Peter Hicks <peter@datakin.com> * Fixing the Job Detail page styles and removing broken elements. Signed-off-by: Peter Hicks <peter@datakin.com> * Self code review cleanup. Signed-off-by: Peter Hicks <peter@datakin.com> * Handling regression with latest run. Signed-off-by: Peter Hicks <peter@datakin.com> * Fixing the test run cycles. Signed-off-by: Peter Hicks <peter@datakin.com> * Fixing prettier and suppressing some errors. Signed-off-by: Peter Hicks <peter@datakin.com> * Graphik --> Karla. Signed-off-by: Peter Hicks <peter@datakin.com> Co-authored-by: Peter Hicks <peter@datakin.com>
MarquezProject · Oct 23, 2020 · a14f744 · a14f744
1 parent 542c650
commit a14f744
Show file tree

Hide file tree

Showing 39 changed files with 1,106 additions and 854 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+/*.*
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -9,13 +9,13 @@ module.exports = {
     project: './tsconfig.json',
     sourceType: 'module'
   },
-  plugins: ['@typescript-eslint', 'react', 'prettier', "sort-imports-es6-autofix"],
+  plugins: ['@typescript-eslint', 'react', "sort-imports-es6-autofix"],
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier'
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
   settings: {
     "react": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,17 +11,19 @@
     "pretest": "eslint src/**/*[x]",
     "test": "jest",
     "test-watch": "jest --watch",
-    "eslint-fix": "eslint . --ext .ts,.tsx --fix"
+    "eslint-fix": "eslint . --ext .ts,.tsx --ignore-pattern \"src/__tests__/*\" --fix"
   },
   "engines": {
     "node": "10.16.3"
   },
   "dependencies": {
-    "@material-ui/core": "^4.6.1",
-    "@material-ui/icons": "^4.4.3",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
     "@types/d3": "^5.7.2",
     "@types/react-router-dom": "^5.1.2",
     "autoprefixer": "^9.5.1",
+    "classnames": "^2.2.6",
     "connected-react-router": "^6.4.0",
     "css-loader": "^2.1.0",
     "d3-color": "^1.4.0",
@@ -34,8 +36,6 @@
     "http-proxy-middleware": "^0.20.0",
     "jest": "23.6.0",
     "lodash": "^4.17.19",
-    "material-ui-flat-pagination": "^4.0.0",
-    "material-ui-search-bar": "^1.0.0-beta.14",
     "postcss-loader": "^3.0.0",
     "postcss-modules-values": "^2.0.0",
     "react": "^16.8.0",
@@ -51,6 +51,7 @@
   },
   "devDependencies": {
     "@material-ui/styles": "^4.0.0-rc.0",
+    "@types/classnames": "^2.2.10",
     "@types/d3-color": "^1.2.2",
     "@types/enzyme": "^3.1.16",
     "@types/enzyme-adapter-react-16": "^1.0.3",

diff --git a/src/__tests__/components/CustomSearchBar.test.tsx b/src/__tests__/components/CustomSearchBar.test.tsx
diff --git a/src/__tests__/components/__snapshots__/CustomSearchBar.test.tsx.snap b/src/__tests__/components/__snapshots__/CustomSearchBar.test.tsx.snap
diff --git a/src/actionCreators/index.ts b/src/actionCreators/index.ts
@@ -1,6 +1,6 @@
 import * as actionTypes from '../constants/ActionTypes'
 
-import { Dataset, Job, Namespace,Run } from '../types/api'
+import { Dataset, Job, Namespace, Run } from '../types/api'
 import { IFilterByKey } from '../types'
 
 export const fetchDatasetsSuccess = (datasets: Dataset[]) => ({
@@ -10,7 +10,6 @@ export const fetchDatasetsSuccess = (datasets: Dataset[]) => ({
   }
 })
 
-
 export const filterDatasets = (filterByKey: IFilterByKey, filterByValue?: string) => ({
   type: actionTypes.FILTER_DATASETS,
   payload: {

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,28 +1,19 @@
-import { CssBaseline } from '@material-ui/core'
-import { Helmet } from 'react-helmet'
-import AppBar from './AppBar'
-import React, { ReactElement, useState } from 'react'
-const globalStyles = require('../global_styles.css')
-const { neptune, telescopeBlack } = globalStyles
 import { ConnectedRouter, routerMiddleware } from 'connected-react-router'
-import { Grid } from '@material-ui/core'
-import {
-  Theme as ITheme,
-  WithStyles as IWithStyles,
-  createStyles,
-  withStyles
-} from '@material-ui/core/styles'
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
+import { Container, CssBaseline } from '@material-ui/core'
+import { Helmet } from 'react-helmet'
+import { Theme as ITheme, createStyles, withStyles } from '@material-ui/core/styles'
+import { MuiThemeProvider } from '@material-ui/core/styles'
 import { Provider } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
 import { applyMiddleware, createStore } from 'redux'
 import { composeWithDevTools } from 'redux-devtools-extension'
 import { createBrowserHistory } from 'history'
+import React, { ReactElement, useState } from 'react'
 import createSagaMiddleware from 'redux-saga'
-import logger from 'redux-logger'
 
-import CustomSearchBar from './CustomSearchBar'
+import { theme } from '../helpers/theme'
 import DatasetDetailPage from './DatasetDetailPage'
+import Header from './header/Header'
 import Home from './Home'
 import JobDetailPage from './JobDetailPage'
 import NetworkGraph from './NetworkGraph'
@@ -38,35 +29,12 @@ const sagaMiddleware = createSagaMiddleware({
 const history = createBrowserHistory()
 const historyMiddleware = routerMiddleware(history)
 
-const middleware = __DEVELOPMENT__
-  ? [sagaMiddleware, historyMiddleware, logger]
-  : [sagaMiddleware, historyMiddleware]
-
 const store = createStore(
   createRootReducer(history),
-  composeWithDevTools(applyMiddleware(...middleware))
+  composeWithDevTools(applyMiddleware(sagaMiddleware, historyMiddleware))
 )
 
 sagaMiddleware.run(rootSaga)
-// see the defaults here for MUI Theme -- https://material-ui.com/customization/default-theme/?expend-path=$.typography
-const theme = createMuiTheme({
-  typography: {
-    h3: {
-      fontSize: '1rem',
-      fontWeight: 700,
-      lineHeight: 2
-    },
-    fontSize: 14
-  },
-  palette: {
-    primary: {
-      main: telescopeBlack
-    },
-    secondary: {
-      main: neptune
-    }
-  }
-})
 
 const styles = (_theme: ITheme) => {
   return createStyles({
@@ -77,11 +45,9 @@ const styles = (_theme: ITheme) => {
   })
 }
 
-type IProps = IWithStyles<typeof styles>
-
 const TITLE = 'Marquez | Data Kit'
 
-const App = ({ classes }: IProps): ReactElement => {
+const App = (): ReactElement => {
   const [showJobs, setShowJobs] = useState(false)
   return (
     <Provider store={store}>
@@ -91,26 +57,22 @@ const App = ({ classes }: IProps): ReactElement => {
             <title>{TITLE}</title>
           </Helmet>
           <CssBaseline />
-          <Grid direction='column' alignItems='stretch' classes={classes} justify='space-between'>
-            <AppBar />
-            <NetworkGraph />
-            <CustomSearchBar
-              setShowJobs={setShowJobs}
-              showJobs={showJobs}
-            />
+          <Container maxWidth={'lg'} disableGutters={true}>
+            <Header setShowJobs={setShowJobs} showJobs={showJobs} />
+          </Container>
+          <NetworkGraph />
+          <Container maxWidth={'lg'} disableGutters={true}>
             <Switch>
               <Route
                 path='/'
                 exact
-                render={props => (
-                  <Home {...props} showJobs={showJobs} setShowJobs={setShowJobs} />
-                  )}
+                render={props => <Home {...props} showJobs={showJobs} setShowJobs={setShowJobs} />}
               />
               <Route path='/datasets/:datasetName' exact component={DatasetDetailPage} />
               <Route path='/jobs/:jobName' exact component={JobDetailPage} />
             </Switch>
-            <Toast />
-          </Grid>
+          </Container>
+          <Toast />
         </MuiThemeProvider>
       </ConnectedRouter>
     </Provider>

diff --git a/src/components/AppBar.tsx b/src/components/AppBar.tsx
@@ -1,7 +1,5 @@
 import { AppBar, Toolbar, Typography } from '@material-ui/core'
-import {
-  Link
-} from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import React, { ReactElement } from 'react'
 
 import {
@@ -43,10 +41,10 @@ const MyAppBar = (props: IProps): ReactElement => {
   return (
     <AppBar position='fixed' className={classes.appBar}>
       <Toolbar>
-        <Link className={link} to="/">
+        <Link className={link} to='/'>
           <img src={require('../img/marquez-logo.png')} height={60} alt='Marquez Logo' />
         </Link>
-        <Link className={link} to="/">
+        <Link className={link} to='/'>
           <Typography className={classes.icon} variant='h4' color='inherit' noWrap>
             MARQUEZ
           </Typography>

diff --git a/src/components/CustomSearchBar.tsx b/src/components/CustomSearchBar.tsx