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

README.md

@@ -1,4 +1,4 @@
-# Sitrep
+# SitRep
 
 ![Lage](docs/images/Lage1.png?raw=true "Lage")
 ![Lage2](docs/images/Lage2.png?raw=true "Lage2")
@@ -12,6 +12,12 @@
 The current develop version is automatically deployed to: [https://demo.sitrep.ch](https://demo.sitrep.ch)
 Login is possible with your Github account or sign-up for a new account at Auth0.
 
+## SitRep As A Service
+
+[F-ELD](https://www.sitrep.ch) is offering SitRep as a managed service for organizations which are members of the F-ELD association.
+The managed services are hosted on a secure infrastructure in Switzerland and are operated by the F-ELD team.
+The hosting partner is [VSHN](https://www.vshn.ch). For further information, please reach out to [[email protected]](mailto:[email protected]).
+
 ### Local Development Environment
 
 A simple local development environment can be created using docker compose and the frontend can be run using yarn.
@@ -73,3 +79,9 @@ This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 [GNU Affero General Public License](LICENSE) for more details.
+
+## Partners and Supporters
+
+<img src="https://www.szsv-fspc.ch/images/logos/logo_szsv_freigestellt.png" height="96px" alt="SZSV / FSPC"/>
+
+<img src="ui/src/assets/vshn.svg" height="64px" alt="VSHN"/>

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

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();
 });

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;