X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/df1ebc0e3184afd3fb66414651fc1aec713928bf..37516bc14fdfe634c78764c15f3a8eb3a09b403c:/services/workbench2/src/views-components/baner/banner.tsx

diff --git a/services/workbench2/src/views-components/baner/banner.tsx b/services/workbench2/src/views-components/baner/banner.tsx
index 9fae638107..ac5b89439c 100644
--- a/services/workbench2/src/views-components/baner/banner.tsx
+++ b/services/workbench2/src/views-components/baner/banner.tsx
@@ -2,39 +2,41 @@
 //
 // 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";
+import { sanitizeHTML } from "common/html-sanitize";
 
-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 +49,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 +73,8 @@ export const BannerComponent = (props: BannerComponentProps) => {
                     }
 
                     if (bannerFileData) {
-                        servicesProvider.getServices()
+                        servicesProvider
+                            .getServices()
                             .collectionService.getFileContents(bannerFileData)
                             .then(data => {
                                 setBannerContents(data);
@@ -88,24 +87,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>
+                    <div dangerouslySetInnerHTML={{ __html: sanitizeHTML(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));