Merge branch '21002-restore-banner-adjust-width'

closes #21002

Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox@curii.com>

diff --git a/src/components/dropdown-menu/dropdown-menu.tsx b/src/components/dropdown-menu/dropdown-menu.tsx
index bb661bc288b3ec0bb1c30bc02f67f41c255174ea..39cce0483496237bbd65202e6da4955836c8b687 100644 (file)
--- a/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/src/components/dropdown-menu/dropdown-menu.tsx
@@ -2,11 +2,11 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React from 'react';
-import Menu from '@material-ui/core/Menu';
-import IconButton from '@material-ui/core/IconButton';
-import { PopoverOrigin } from '@material-ui/core/Popover';
-import { Tooltip } from '@material-ui/core';
+import React from "react";
+import Menu from "@material-ui/core/Menu";
+import IconButton from "@material-ui/core/IconButton";
+import { PopoverOrigin } from "@material-ui/core/Popover";
+import { Tooltip } from "@material-ui/core";
 
 interface DropdownMenuProps {
     id: string;
@@ -20,12 +20,12 @@ interface DropdownMenuState {
 
 export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMenuState> {
     state = {
-        anchorEl: undefined
+        anchorEl: undefined,
     };
 
     transformOrigin: PopoverOrigin = {
         vertical: -50,
-        horizontal: 0
+        horizontal: 0,
     };
 
     render() {
@@ -33,7 +33,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
         const { anchorEl } = this.state;
         return (
             <div>
-                <Tooltip title={title}>
+                <Tooltip
+                    title={title}
+                    disableFocusListener>
                     <IconButton
                         aria-owns={anchorEl ? id : undefined}
                         aria-haspopup="true"
@@ -57,9 +59,9 @@ export class DropdownMenu extends React.Component<DropdownMenuProps, DropdownMen
 
     handleClose = () => {
         this.setState({ anchorEl: undefined });
-    }
+    };
 
     handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
         this.setState({ anchorEl: event.currentTarget });
-    }
+    };
 }

diff --git a/src/views-components/baner/banner.tsx b/src/views-components/baner/banner.tsx
index 9fae638107e5aba50e07e4a77427ce50c2b962a1..7e39186c09f8d852f7868ed26579dd0a4e619eba 100644 (file)
--- a/src/views-components/baner/banner.tsx
+++ b/src/views-components/baner/banner.tsx
@@ -2,39 +2,40 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from "react";
 import { Dialog, DialogContent, DialogActions, Button, StyleRulesCallback, withStyles, WithStyles } from "@material-ui/core";
 import { connect } from "react-redux";
 import { RootState } from "store/store";
 import bannerActions from "store/banner/banner-action";
-import { ArvadosTheme } from 'common/custom-theme';
-import servicesProvider from 'common/service-provider';
-import { Dispatch } from 'redux';
+import { ArvadosTheme } from "common/custom-theme";
+import servicesProvider from "common/service-provider";
+import { Dispatch } from "redux";
 
-type CssRules = 'dialogContent' | 'dialogContentIframe';
+type CssRules = "dialogContent" | "dialogContentIframe";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     dialogContent: {
-        minWidth: '550px',
-        minHeight: '500px',
-        display: 'block'
+        minWidth: "550px",
+        minHeight: "500px",
+        display: "block",
     },
     dialogContentIframe: {
-        minWidth: '550px',
-        minHeight: '500px'
-    }
+        minWidth: "550px",
+        minHeight: "500px",
+    },
 });
 
 interface BannerProps {
     isOpen: boolean;
     bannerUUID?: string;
     keepWebInlineServiceUrl: string;
-};
+}
 
-type BannerComponentProps = BannerProps & WithStyles<CssRules> & {
-    openBanner: Function,
-    closeBanner: Function,
-};
+type BannerComponentProps = BannerProps &
+    WithStyles<CssRules> & {
+        openBanner: Function;
+        closeBanner: Function;
+    };
 
 const mapStateToProps = (state: RootState): BannerProps => ({
     isOpen: state.banner.isOpen,
@@ -47,27 +48,23 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
     closeBanner: () => dispatch<any>(bannerActions.closeBanner()),
 });
 
-export const BANNER_LOCAL_STORAGE_KEY = 'bannerFileData';
+export const BANNER_LOCAL_STORAGE_KEY = "bannerFileData";
 
 export const BannerComponent = (props: BannerComponentProps) => {
-    const { 
-        isOpen,
-        openBanner,
-        closeBanner,
-        bannerUUID,
-        keepWebInlineServiceUrl
-    } = props;
-    const [bannerContents, setBannerContents] = useState(`<h1>Loading ...</h1>`)
+    const { isOpen, openBanner, closeBanner, bannerUUID, keepWebInlineServiceUrl } = props;
+    const [bannerContents, setBannerContents] = useState(`<h1>Loading ...</h1>`);
 
     const onConfirm = useCallback(() => {
         closeBanner();
-    }, [closeBanner])
+    }, [closeBanner]);
 
     useEffect(() => {
         if (!!bannerUUID && bannerUUID !== "") {
-            servicesProvider.getServices().collectionService.files(bannerUUID)
+            servicesProvider
+                .getServices()
+                .collectionService.files(bannerUUID)
                 .then(results => {
-                    const bannerFileData = results.find(({name}) => name === 'banner.html');
+                    const bannerFileData = results.find(({ name }) => name === "banner.html");
                     const result = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
 
                     if (result && result === JSON.stringify(bannerFileData) && !isOpen) {
@@ -75,7 +72,8 @@ export const BannerComponent = (props: BannerComponentProps) => {
                     }
 
                     if (bannerFileData) {
-                        servicesProvider.getServices()
+                        servicesProvider
+                            .getServices()
                             .collectionService.getFileContents(bannerFileData)
                             .then(data => {
                                 setBannerContents(data);
@@ -88,24 +86,28 @@ export const BannerComponent = (props: BannerComponentProps) => {
     }, [bannerUUID, keepWebInlineServiceUrl, openBanner, isOpen]);
 
     return (
-        <Dialog open={isOpen}>
-            <div data-cy='confirmation-dialog'>
+        <Dialog
+            open={isOpen}
+            maxWidth="md"
+        >
+            <div data-cy="confirmation-dialog">
                 <DialogContent className={props.classes.dialogContent}>
                     <div dangerouslySetInnerHTML={{ __html: bannerContents }}></div>
                 </DialogContent>
-                <DialogActions style={{ margin: '0px 24px 24px' }}>
+                <DialogActions style={{ margin: "0px 24px 24px" }}>
                     <Button
-                        data-cy='confirmation-dialog-ok-btn'
-                        variant='contained'
-                        color='primary'
-                        type='submit'
-                        onClick={onConfirm}>
+                        data-cy="confirmation-dialog-ok-btn"
+                        variant="contained"
+                        color="primary"
+                        type="submit"
+                        onClick={onConfirm}
+                    >
                         Close
                     </Button>
                 </DialogActions>
             </div>
         </Dialog>
     );
-}
+};
 
 export const Banner = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(BannerComponent));

diff --git a/src/views-components/main-app-bar/notifications-menu.tsx b/src/views-components/main-app-bar/notifications-menu.tsx
index ca97a612bb11875460c17eeed6487266b9c46cf3..89fd2e9184793bf7cd790d7d052c43ad1917d1d8 100644 (file)
--- a/src/views-components/main-app-bar/notifications-menu.tsx
+++ b/src/views-components/main-app-bar/notifications-menu.tsx
@@ -26,11 +26,11 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 type NotificationsMenuProps = {
     isOpen: boolean;
     bannerUUID?: string;
-}
+};
 
 type NotificationsMenuComponentProps = NotificationsMenuProps & {
     openBanner: any;
-}
+};
 
 export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
     const { isOpen, openBanner } = props;
@@ -39,41 +39,58 @@ export const NotificationsMenuComponent = (props: NotificationsMenuComponentProp
     const menuItems: any[] = [];
 
     if (!isOpen && bannerResult) {
-        menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
+        menuItems.push(
+            <MenuItem onClick={openBanner}>
+                <span>Restore Banner</span>
+            </MenuItem>
+        );
     }
 
     const toggleTooltips = useCallback(() => {
         if (tooltipResult) {
             localStorage.removeItem(TOOLTIP_LOCAL_STORAGE_KEY);
         } else {
-            localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, 'true');
+            localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, "true");
         }
         window.location.reload();
     }, [tooltipResult]);
 
     if (tooltipResult) {
-        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Enable tooltips</span></MenuItem>);
+        menuItems.push(
+            <MenuItem onClick={toggleTooltips}>
+                <span>Enable tooltips</span>
+            </MenuItem>
+        );
     } else {
-        menuItems.push(<MenuItem><span onClick={toggleTooltips}>Disable tooltips</span></MenuItem>);
+        menuItems.push(
+            <MenuItem onClick={toggleTooltips}>
+                <span>Disable tooltips</span>
+            </MenuItem>
+        );
     }
 
     if (menuItems.length === 0) {
         menuItems.push(<MenuItem>You are up to date</MenuItem>);
     }
 
-    return (<DropdownMenu
-        icon={
-            <Badge
-                badgeContent={0}
-                color="primary">
-                <NotificationIcon />
-            </Badge>}
-        id="account-menu"
-        title="Notifications">
-        {
-            menuItems.map((item, i) => <div key={i}>{item}</div>)
-        }
-    </DropdownMenu>);
-}
+    return (
+        <DropdownMenu
+            icon={
+                <Badge
+                    badgeContent={0}
+                    color="primary"
+                >
+                    <NotificationIcon />
+                </Badge>
+            }
+            id="account-menu"
+            title="Notifications"
+        >
+            {menuItems.map((item, i) => (
+                <div key={i}>{item}</div>
+            ))}
+        </DropdownMenu>
+    );
+};
 
 export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);