services/workbench2/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(
  43             <MenuItem onClick={openBanner} data-cy="restore-banner-li">
  44                 <span>Restore Banner</span>
  45             </MenuItem>
  46         );
  47     }
  48
  49     const toggleTooltips = useCallback(() => {
  50         if (tooltipResult) {
  51             localStorage.removeItem(TOOLTIP_LOCAL_STORAGE_KEY);
  52         } else {
  53             localStorage.setItem(TOOLTIP_LOCAL_STORAGE_KEY, "true");
  54         }
  55         window.location.reload();
  56     }, [tooltipResult]);
  57
  58     if (tooltipResult) {
  59         menuItems.push(
  60             <MenuItem onClick={toggleTooltips} data-cy="enable-tooltip-toggle">
  61                 <span>Enable tooltips</span>
  62             </MenuItem>
  63         );
  64     } else {
  65         menuItems.push(
  66             <MenuItem onClick={toggleTooltips} data-cy="disable-tooltip-toggle">
  67                 <span>Disable tooltips</span>
  68             </MenuItem>
  69         );
  70     }
  71
  72     if (menuItems.length === 0) {
  73         menuItems.push(<MenuItem>You are up to date</MenuItem>);
  74     }
  75
  76     return (
  77         <DropdownMenu
  78             icon={
  79                 <Badge
  80                     badgeContent={0}
  81                     color="primary"
  82                 >
  83                     <NotificationIcon />
  84                 </Badge>
  85             }
  86             id="account-menu"
  87             title="Notifications"
  88         >
  89             {menuItems.map((item, i) => (
  90                 <div key={i}>{item}</div>
  91             ))}
  92         </DropdownMenu>
  93     );
  94 };
  95
  96 export const NotificationsMenu = connect(mapStateToProps, mapDispatchToProps)(NotificationsMenuComponent);