services/workbench2/src/views-components/baner/banner.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React, { useState, useCallback, useEffect } from "react";
   6 import { Dialog, DialogContent, DialogActions, Button, StyleRulesCallback, withStyles, WithStyles } from "@material-ui/core";
   7 import { connect } from "react-redux";
   8 import { RootState } from "store/store";
   9 import bannerActions from "store/banner/banner-action";
  10 import { ArvadosTheme } from "common/custom-theme";
  11 import servicesProvider from "common/service-provider";
  12 import { Dispatch } from "redux";
  13 import { sanitizeHTML } from "common/html-sanitize";
  14
  15 type CssRules = "dialogContent" | "dialogContentIframe";
  16
  17 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  18     dialogContent: {
  19         minWidth: "550px",
  20         minHeight: "500px",
  21         display: "block",
  22     },
  23     dialogContentIframe: {
  24         minWidth: "550px",
  25         minHeight: "500px",
  26     },
  27 });
  28
  29 interface BannerProps {
  30     isOpen: boolean;
  31     bannerUUID?: string;
  32     keepWebInlineServiceUrl: string;
  33 }
  34
  35 type BannerComponentProps = BannerProps &
  36     WithStyles<CssRules> & {
  37         openBanner: Function;
  38         closeBanner: Function;
  39     };
  40
  41 const mapStateToProps = (state: RootState): BannerProps => ({
  42     isOpen: state.banner.isOpen,
  43     bannerUUID: state.auth.config.clusterConfig.Workbench.BannerUUID,
  44     keepWebInlineServiceUrl: state.auth.config.keepWebInlineServiceUrl,
  45 });
  46
  47 const mapDispatchToProps = (dispatch: Dispatch) => ({
  48     openBanner: () => dispatch<any>(bannerActions.openBanner()),
  49     closeBanner: () => dispatch<any>(bannerActions.closeBanner()),
  50 });
  51
  52 export const BANNER_LOCAL_STORAGE_KEY = "bannerFileData";
  53
  54 export const BannerComponent = (props: BannerComponentProps) => {
  55     const { isOpen, openBanner, closeBanner, bannerUUID, keepWebInlineServiceUrl } = props;
  56     const [bannerContents, setBannerContents] = useState(`<h1>Loading ...</h1>`);
  57
  58     const onConfirm = useCallback(() => {
  59         closeBanner();
  60     }, [closeBanner]);
  61
  62     useEffect(() => {
  63         if (!!bannerUUID && bannerUUID !== "") {
  64             try {
  65             servicesProvider
  66                 .getServices()
  67                 .collectionService.files(bannerUUID)
  68                 .then(results => {
  69                     const bannerFileData = results.find(({ name }) => name === "banner.html");
  70                     const result = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
  71
  72                     if (result && result === JSON.stringify(bannerFileData) && !isOpen) {
  73                         return;
  74                     }
  75
  76                     if (bannerFileData) {
  77                         servicesProvider
  78                             .getServices()
  79                             .collectionService.getFileContents(bannerFileData)
  80                             .then(data => {
  81                                 setBannerContents(data);
  82                                 openBanner();
  83                                 localStorage.setItem(BANNER_LOCAL_STORAGE_KEY, JSON.stringify(bannerFileData));
  84                             });
  85                     }
  86                 })
  87             } catch (e) {
  88                 console.error("Failed to load banner", e);
  89             }
  90         }
  91     }, [bannerUUID, keepWebInlineServiceUrl, openBanner, isOpen]);
  92
  93     return (
  94         <Dialog
  95             open={isOpen}
  96             maxWidth="md"
  97         >
  98             <div data-cy="confirmation-dialog">
  99                 <DialogContent className={props.classes.dialogContent}>
 100                     <div dangerouslySetInnerHTML={{ __html: sanitizeHTML(bannerContents) }}></div>
 101                 </DialogContent>
 102                 <DialogActions style={{ margin: "0px 24px 24px" }}>
 103                     <Button
 104                         data-cy="confirmation-dialog-ok-btn"
 105                         variant="contained"
 106                         color="primary"
 107                         type="submit"
 108                         onClick={onConfirm}
 109                     >
 110                         Close
 111                     </Button>
 112                 </DialogActions>
 113             </div>
 114         </Dialog>
 115     );
 116 };
 117
 118 export const Banner = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(BannerComponent));