Clean up main app bar and breadcrumbs code

Feature #13590

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index a3f9462e9ad2d11bfa9614b05351d73bfceed955..7fa85ca0c716070beaa32fc4c411f6ebe1c50e77 100644 (file)
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -11,17 +11,12 @@ export interface Breadcrumb {
     label: string;
 }
 
-interface BreadcrumbsDataProps {
+interface BreadcrumbsProps {
     items: Breadcrumb[];
-}
-
-interface BreadcrumbsActionProps {
     onClick: (breadcrumb: Breadcrumb) => any;
 }
 
-type BreadcrumbsProps = BreadcrumbsDataProps & BreadcrumbsActionProps & WithStyles<CssRules>;
-
-class Breadcrumbs extends React.Component<BreadcrumbsProps> {
+class Breadcrumbs extends React.Component<BreadcrumbsProps & WithStyles<CssRules>> {
 
     render() {
         const { classes, onClick } = this.props;

diff --git a/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx b/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx
index 4ce2f596e5d783f781fce4aab1b70e2e8fe38df0..4f2b83af6591e6ab9d72d1e0d83914ff55bd4414 100644 (file)
--- a/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/main-app-bar/dropdown-menu/dropdown-menu.tsx
@@ -3,18 +3,15 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from 'react';
-import { Button, Grid, StyleRulesCallback, WithStyles, Menu, MenuItem, IconButton } from '@material-ui/core';
+import { Menu, IconButton } from '@material-ui/core';
 import { PopoverOrigin } from '@material-ui/core/Popover';
 
 
-interface DropdownMenuDataProps {
+interface DropdownMenuProps {
     id: string;
     icon: React.ComponentType;
 }
 
-
-type DropdownMenuProps = DropdownMenuDataProps;
-
 class DropdownMenu extends React.Component<DropdownMenuProps> {
 
     state = {

diff --git a/src/components/main-app-bar/main-app-bar.tsx b/src/components/main-app-bar/main-app-bar.tsx
index eb18fd1278463d4f1b73652127e80f7794e71e41..4beea605e661e306ba3f7f74c70c00da423571d9 100644 (file)
--- a/src/components/main-app-bar/main-app-bar.tsx
+++ b/src/components/main-app-bar/main-app-bar.tsx
@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import * as React from "react";
-import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, Paper, Input, StyleRulesCallback, withStyles, WithStyles, Button, MenuItem } from "@material-ui/core";
+import { AppBar, Toolbar, Typography, Grid, IconButton, Badge, StyleRulesCallback, withStyles, WithStyles, Button, MenuItem } from "@material-ui/core";
 import NotificationsIcon from "@material-ui/icons/Notifications";
 import PersonIcon from "@material-ui/icons/Person";
 import HelpIcon from "@material-ui/icons/Help";

diff --git a/src/components/main-app-bar/search-bar/search-bar.tsx b/src/components/main-app-bar/search-bar/search-bar.tsx
index f9e93d679c2973bf575b8e65173b028b384dbc9e..62c8cc3c510b9be4a25e0206afb350884811496c 100644 (file)
--- a/src/components/main-app-bar/search-bar/search-bar.tsx
+++ b/src/components/main-app-bar/search-bar/search-bar.tsx
@@ -29,7 +29,7 @@ class SearchBar extends React.Component<SearchBarProps> {
         value: ""
     };
 
-    timeout: NodeJS.Timer;
+    timeout: number;
 
     render() {
         const { classes } = this.props;
@@ -71,7 +71,7 @@ class SearchBar extends React.Component<SearchBarProps> {
     handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         clearTimeout(this.timeout);
         this.setState({ value: event.target.value });
-        this.timeout = setTimeout(
+        this.timeout = window.setTimeout(
             () => this.props.onSearch(this.state.value),
             this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
         );
@@ -83,7 +83,6 @@ class SearchBar extends React.Component<SearchBarProps> {
 type CssRules = 'container' | 'input' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = theme => {
-    const { unit } = theme.spacing;
     return {
         container: {
             position: 'relative',
@@ -91,18 +90,18 @@ const styles: StyleRulesCallback<CssRules> = theme => {
         },
         input: {
             border: 'none',
-            borderRadius: unit / 4,
+            borderRadius: theme.spacing.unit / 4,
             boxSizing: 'border-box',
-            padding: unit,
-            paddingRight: unit * 4,
+            padding: theme.spacing.unit,
+            paddingRight: theme.spacing.unit * 4,
             width: '100%',
         },
         button: {
             position: 'absolute',
-            top: unit / 2,
-            right: unit / 2,
-            width: unit * 3,
-            height: unit * 3
+            top: theme.spacing.unit / 2,
+            right: theme.spacing.unit / 2,
+            width: theme.spacing.unit * 3,
+            height: theme.spacing.unit * 3
         }
     };
 };