src/views-components/main-app-bar/notifications-menu.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from "react";
   6 import { Dispatch } from "redux";
   7 import { connect } from "react-redux";
   8 import { Badge, MenuItem } from "@material-ui/core";
   9 import { DropdownMenu } from "components/dropdown-menu/dropdown-menu";
  10 import { NotificationIcon } from "components/icon/icon";
  11 import bannerActions from "store/banner/banner-action";
  12 import { BANNER_LOCAL_STORAGE_KEY } from "views-components/baner/banner";
  13 import { RootState } from "store/store";
  14 import { TOOLTIP_LOCAL_STORAGE_KEY } from "store/tooltips/tooltips-middleware";
  15 import { useCallback } from "react";
  16
  17 const mapStateToProps = (state: RootState): NotificationsMenuProps => ({
  18     isOpen: state.banner.isOpen,
  19     bannerUUID: state.auth.config.clusterConfig.Workbench.BannerUUID,
  20 });
  21
  22 const mapDispatchToProps = (dispatch: Dispatch) => ({
  23     openBanner: () => dispatch<any>(bannerActions.openBanner()),
  24 });
  25
  26 type NotificationsMenuProps = {
  27     isOpen: boolean;
  28     bannerUUID?: string;
  29 }
  30
  31 type NotificationsMenuComponentProps = NotificationsMenuProps & {
  32     openBanner: any;
  33 }
  34
  35 export const NotificationsMenuComponent = (props: NotificationsMenuComponentProps) => {
  36     const { isOpen, openBanner } = props;
  37     const bannerResult = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
  38     const tooltipResult = localStorage.getItem(TOOLTIP_LOCAL_STORAGE_KEY);
  39     const menuItems: any[] = [];
  40
  41     if (!isOpen && bannerResult) {
  42         menuItems.push(<MenuItem><span onClick={openBanner}>Restore Banner</span></MenuItem>);
  43     }
  44
  45     const toggleTooltips = useCallback(() => {
  46         if (tooltipResult) {
  47             localStorage.removeItem(TOOLTIP_LOCAL_STORAGE_KEY);
  48         } else {
  49             localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, 'true');
  50         }
  51         window.location.reload();
  52     }, [tooltipResult]);
  53
  54     if (tooltipResult) {
  55         menuItems.push(<MenuItem><span onClick={toggleTooltips}>Enable tooltips</span></MenuItem>);
  56     } else {
  57         menuItems.push(<MenuItem><span onClick={toggleTooltips}>Disable tooltips</span></MenuItem>);
  58     }
  59
  60     if (menuItems.length === 0) {
  61         menuItems.push(<MenuItem>You are up to date</MenuItem>);
  62     }
  63
  64     return (<DropdownMenu
  65         icon={
  66             <Badge
  67                 badgeContent={0}
  68                 color="primary">
  69                 <NotificationIcon />
  70             </Badge>}
  71         id="account-menu"
  72         title="Notifications">
  73         {
  74             menuItems.map((item, i) => <div key={i}>{item}</div>)
  75         }
  76     </DropdownMenu>);
  77 }
  78
  79 export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);