feat(ui): add hosted by VSHN in footer for managed instances

f-eld-ch · Jan 7, 2025 · 3cc17c7 · 3cc17c7
1 parent 110bd05
commit 3cc17c7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 8 deletions.
diff --git a/ui/features.yaml b/ui/features.yaml
@@ -21,6 +21,16 @@ flags:
       - segment:
           key: Development
           value: true
+  # nimdanitro: flag for indicating that it is a sitrep managed instances
+  - key: is-sitrep-managed
+    name: Sitrep Managed
+    type: BOOLEAN_FLAG_TYPE
+    description: Indicate that the instance is managed by Sitrep
+    enabled: false
+    rollouts:
+      - segment:
+          key: Development
+          value: true
 segments:
   - key: Development
     name: Development
@@ -30,3 +40,11 @@ segments:
         operator: isoneof
         value: '["dev.sitrep.ch","localhost","127.0.0.1"]'
     match_type: ALL_MATCH_TYPE
+  - key: SitrepManaged
+    name: SitrepManaged
+    constraints:
+      - type: STRING_COMPARISON_TYPE
+        property: domain
+        operator: suffix
+        value: ".sitrep.ch"
+    match_type: ANY_MATCH_TYPE
diff --git a/ui/src/assets/vshn.svg b/ui/src/assets/vshn.svg
diff --git a/ui/src/components/Footer.test.tsx b/ui/src/components/Footer.test.tsx
@@ -1,8 +1,13 @@
 import { render, screen } from "@testing-library/react";
 import Footer from "./Footer";
+import { Provider as FeatureFlagProvider } from "../FeatureFlags";
 
 test("renders learn react link", () => {
-  render(<Footer />);
+  render(
+    <FeatureFlagProvider>
+      <Footer />
+    </FeatureFlagProvider>,
+  );
   const linkElement = screen.getByText(/F-ELD/i);
   expect(linkElement).toBeInTheDocument();
 });
diff --git a/ui/src/components/Footer.tsx b/ui/src/components/Footer.tsx
@@ -1,12 +1,13 @@
 import { faHeart } from "@fortawesome/free-solid-svg-icons";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
-
+import { useBooleanFlagValue } from "@openfeature/react-sdk";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import VSHN from "../assets/vshn.svg";
 
 function Footer() {
   return (
     <footer className="footer is-hidden-print">
-      <div className="content has-text-centered is-flex is-align-content-space-around is-align-items-center is-justify-content-center">
+      <div className="content has-text-centered is-flex-desktop is-flex-wrap-nowrap is-align-content-space-around is-flex-direction-row	is-align-items-center is-justify-content-center">
         <a
           className="has-text-current"
           href="https://github.com/f-eld-ch/sitrep"
@@ -25,17 +26,50 @@ function Footer() {
           </span>
         </a>
 
-        <p className="is-size-7 is-family-monospace ml-2">
-          made with <FontAwesomeIcon icon={faHeart} color="red" /> in Switzerland by
+        <div className="is-size-7 is-hidden-touch is-family-monospace ml-1 is-flex-desktop is-justis-align-content-center is-align-items-center">
+          made with
+          <span className="icon-text is-small is-size-7">
+            <span className="icon is-align-content-center">
+              <FontAwesomeIcon icon={faHeart} color="red" />
+            </span>
+          </span>
+          in Switzerland by
           <strong className="has-text-current">
-            <a className="has-text-current" href="https://github.com/f-eld-ch" target="_blank" rel="noopener noreferrer">
-              {" "}F-ELD
+            <a
+              className="has-text-current ml-1"
+              href="https://github.com/f-eld-ch"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              F-ELD
             </a>
           </strong>
-        </p>
+        </div>
+        <FooterManaged />
       </div>
     </footer>
   );
 }
 
+function FooterManaged() {
+  const isSitrepManaged = useBooleanFlagValue("is-sitrep-managed", false);
+
+  if (!isSitrepManaged) {
+    return;
+  }
+  return (
+    <div className="is-flex is-size-7 is-family-monospace is-hidden-touch	ml-1 is-justify-content-center is-align-content-center is-align-items-center">
+      and hosted by
+      <a
+        className="has-text-current is-align-self-center ml-1 is-align-content-center is-align-items-center is-justify-content-center"
+        href="https://www.vshn.ch"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img src={VSHN} alt="VSHN" className="is-align-self-center" style={{ minHeight: "0.7rem" }} />
+      </a>
+    </div>
+  );
+}
+
 export default Footer;