1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
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";
14 type CssRules = "dialogContent" | "dialogContentIframe";
16 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
22 dialogContentIframe: {
28 interface BannerProps {
31 keepWebInlineServiceUrl: string;
34 type BannerComponentProps = BannerProps &
35 WithStyles<CssRules> & {
37 closeBanner: Function;
40 const mapStateToProps = (state: RootState): BannerProps => ({
41 isOpen: state.banner.isOpen,
42 bannerUUID: state.auth.config.clusterConfig.Workbench.BannerUUID,
43 keepWebInlineServiceUrl: state.auth.config.keepWebInlineServiceUrl,
46 const mapDispatchToProps = (dispatch: Dispatch) => ({
47 openBanner: () => dispatch<any>(bannerActions.openBanner()),
48 closeBanner: () => dispatch<any>(bannerActions.closeBanner()),
51 export const BANNER_LOCAL_STORAGE_KEY = "bannerFileData";
53 export const BannerComponent = (props: BannerComponentProps) => {
54 const { isOpen, openBanner, closeBanner, bannerUUID, keepWebInlineServiceUrl } = props;
55 const [bannerContents, setBannerContents] = useState(`<h1>Loading ...</h1>`);
57 const onConfirm = useCallback(() => {
62 if (!!bannerUUID && bannerUUID !== "") {
65 .collectionService.files(bannerUUID)
67 const bannerFileData = results.find(({ name }) => name === "banner.html");
68 const result = localStorage.getItem(BANNER_LOCAL_STORAGE_KEY);
70 if (result && result === JSON.stringify(bannerFileData) && !isOpen) {
77 .collectionService.getFileContents(bannerFileData)
79 setBannerContents(data);
81 localStorage.setItem(BANNER_LOCAL_STORAGE_KEY, JSON.stringify(bannerFileData));
86 }, [bannerUUID, keepWebInlineServiceUrl, openBanner, isOpen]);
93 <div data-cy="confirmation-dialog">
94 <DialogContent className={props.classes.dialogContent}>
95 <div dangerouslySetInnerHTML={{ __html: bannerContents }}></div>
97 <DialogActions style={{ margin: "0px 24px 24px" }}>
99 data-cy="confirmation-dialog-ok-btn"
113 export const Banner = withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(BannerComponent));