added risk banner to viewer

Author: imring

…ages/db/src/SharedComponents/Warning.tsx …/components/src/common/gcsim/Warning.tsxui/packages/db/src/SharedComponents/Warning.tsx renamed to ui/packages/components/src/common/gcsim/Warning.tsx ui/packages/db/src/SharedComponents/Warning.tsx renamed to ui/packages/components/src/common/gcsim/Warning.tsx

@@ -1,21 +1,21 @@
 import {Button} from '@blueprintjs/core';
-import tanuki from 'images/tanuki.png';
+import tanuki from '../../images/tanuki.png'
 import React from 'react';
-import {Trans, TransProps, useTranslation} from 'react-i18next';
+import {Trans, useTranslation} from 'react-i18next';
 
 interface WarningProps {
   hideKey: string;
   headerKey: string;
   bodyKey: string;
+  showButton?: boolean;
   className?: string;
-  backgroundColor?: string;
-  borderColor?: string;
 }
 
 export function Warning({
   hideKey,
   headerKey,
   bodyKey,
+  showButton = true,
   className = "bg-slate-900 border-blue-800",
 }: WarningProps) {
   const { t } = useTranslation();
@@ -27,6 +27,9 @@ export function Warning({
   }, [hide, hideKey]);
 
   if (hide) {
+    if (!showButton) {
+      return <></>;
+    }
     return (
       <div className="flex flex-col py-0 min-[1300px]:w-[1100px]">
         <div className="ml-auto">

ui/packages/components/src/common/gcsim/index.ts

@@ -10,4 +10,5 @@ export * from "./GraphComponents/OuterLabelPie/Tooltip";
 export * from "./NoData";
 export * from "./Refresh";
 export * from "./LatestVersion";
+export * from "./Warning";
 export { OuterLabelPie, CardTitle, FloatStatTooltipContent };

ui/packages/db/src/Pages/Database/DBVIew.tsx

@@ -3,7 +3,7 @@ import eula from 'images/eula.png';
 import {useTranslation} from 'react-i18next';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import {ActionBar} from 'SharedComponents/ActionBar';
-import {Warning} from 'SharedComponents/Warning';
+import {Warning} from '@gcsim/components';
 import {ListView} from '../../SharedComponents/ListView';
 
 type Props = {
@@ -22,6 +22,7 @@ export const DBView = (props: Props) => {
         headerKey="warnings.gcsim_risk_title"
         bodyKey="warnings.gcsim_risk_body"
         className="bg-red-950 border-red-800"
+        showButton={false}
       />
       <Warning
         hideKey="hide-warning-db"

ui/packages/ui/src/Pages/Viewer/Viewer.tsx

@@ -15,6 +15,7 @@ import { RootState, useAppSelector } from "@ui/Stores/store";
 import CopyToClipboard from "@ui/Components/Buttons/CopyToClipboard";
 import SendToSimulator from "@ui/Components/Buttons/SendToSimulator";
 import { useTranslation } from "react-i18next";
+import { Warning } from "@gcsim/components";
 
 type ViewerProps = {
   running: boolean;
@@ -61,6 +62,15 @@ export default ({ running, data, hash = "", recoveryConfig, error, src, redirect
 
   return (
     <div className="flex flex-col flex-grow w-full pb-6">
+      <div className="flex flex-col px-2 pt-4 empty:pt-0 2xl:mx-auto items-center justify-center">
+        <Warning
+          hideKey="hide-warning-risk"
+          headerKey="warnings.gcsim_risk_title"
+          bodyKey="warnings.gcsim_risk_body"
+          className="bg-red-950 border-red-800"
+          showButton={false}
+        />
+      </div>
       <Warnings data={data} />
       <div className="px-2 py-4 w-full 2xl:mx-auto 2xl:container">
         <ViewerNav