feature: draggable loader alert

package.json

@@ -37,6 +37,7 @@
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-typeahead": "^6.1.2",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-router-dom": "^5.2.0",
     "react-webcam": "^7.1.1",
     "react-zxing": "^1.1.4",

src/components/BosLoaderBanner.js

@@ -1,30 +1,57 @@
-import styled from 'styled-components';
+import styled from "styled-components";
+import Draggable from "react-draggable";
 
-import { useFlags } from '../hooks/useFlags';
-import { useBosLoaderStore } from '../stores/bos-loader';
-import React from 'react';
-
-const Banner = styled.div`
-  background: #fff2cd;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  min-height: 2rem;
-  column-gap: 8px;
-
-  p {
-    margin: 0;
-    color: #664d04;
-  }
-`;
+import { useFlags } from "../hooks/useFlags";
+import { useBosLoaderStore } from "../stores/bos-loader";
+import React from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 const Button = styled.button`
   all: unset;
   display: block;
   height: 16px;
   line-height: 16px;
   color: #664d04;
+
+  border-radius: 100rem;
+
+  &:active,
+  &:hover {
+    outline: none;
+    border: none;
+  }
+`;
+
+const Floating = styled.div`
+  position: fixed;
+  top: 7rem;
+  right: 1rem;
+  width: max-content;
+
+  z-index: 1000;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  border-radius: 50rem;
+  padding: 8px 16px;
+  text-align: center;
+
+  background: #fff2cd;
+  color: #664d04;
+
+  @media screen and (max-width: 800px) {
+    top: 4rem;
+    right: 0.5rem;
+  }
+`;
+
+const Container = styled.a`
+  color: inherit;
+  &:hover {
+    text-decoration: none;
+  }
 `;
 
 export function BosLoaderBanner() {
@@ -37,23 +64,39 @@ export function BosLoaderBanner() {
     }
   }
 
+  function onRefresh() {
+    window.location.reload();
+  }
+
   if (!redirectMapStore.loaderUrl) return null;
 
   return (
-    <Banner>
-      <div>
-        <p>Loading components from: {redirectMapStore.loaderUrl}</p>
-        {redirectMapStore.failedToLoad && (
-          <p style={{ color: 'red' }}>
-            BOS Loader fetch error, see console logs. CORS errors may be misleading and mean your endpoint cannot be
-            reached
-          </p>
-        )}
-      </div>
-
-      <Button type="button" onClick={closeBanner}>
-        <i className="ph-fill ph-x-circle" />
-      </Button>
-    </Banner>
+    <Draggable position={null}>
+      <Floating>
+        <OverlayTrigger
+          key={"bos-loader"}
+          placement={"bottom"}
+          overlay={
+            <Tooltip>
+              {redirectMapStore.failedToLoad
+                ? "Check console.log. CORS errors may be misleading"
+                : redirectMapStore.loaderUrl}
+            </Tooltip>
+          }
+        >
+          <Container href={"/flags"}>
+            {redirectMapStore.failedToLoad
+              ? "BOS Loader fetch error"
+              : "Loading components"}
+          </Container>
+        </OverlayTrigger>
+        <Button type="button" onClick={closeBanner}>
+          <i className="bi bi-x" />
+        </Button>
+        <Button type="button" onClick={onRefresh}>
+          <i className="bi bi-arrow-clockwise"></i>
+        </Button>
+      </Floating>
+    </Draggable>
   );
 }

yarn.lock

@@ -5443,6 +5443,11 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 collections@^5.1.12:
   version "5.1.13"
   resolved "https://registry.yarnpkg.com/collections/-/collections-5.1.13.tgz#eee204a93b67473c8e74e00e934a997cc2817585"
@@ -10091,6 +10096,14 @@ [email protected], react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-draggable@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-error-boundary@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.4.tgz#255db92b23197108757a888b01e5b729919abde0"