feat(landing): disable domain switcher for specific domains (#1435)

Co-authored-by: Esther Schmitz <[email protected]>

app/javascript/widgets/landing_page/App.jsx

@@ -12,14 +12,15 @@ import styles from "./styles.scss?inline"
 import useStore from "./store"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components"
 
-const App = ({ region, domain, prodmode, hideDocs, hideSupport }) => {
+const App = ({ region, domain, prodmode, hideDocs, hideSupport, hideDomainSwitcher }) => {
   const loginOverlayVisible = useStore((state) => state.loginOverlayVisible)
   const selectRegion = useStore((state) => state.selectRegion)
   const setPreselectedRegion = useStore((state) => state.setPreselectedRegion)
   const selectDomain = useStore((state) => state.selectDomain)
   const setProdMode = useStore((state) => state.setProdMode)
   const setHideDocs = useStore((state) => state.setHideDocs)
   const setHideSupport = useStore((state) => state.setHideSupport)
+  const setHideDomainSwitcher = useStore((state) => state.setHideDomainSwitcher)
 
   useEffect(() => {
     if (region) {
@@ -31,6 +32,7 @@ const App = ({ region, domain, prodmode, hideDocs, hideSupport }) => {
     }
     setHideDocs(hideDocs === "true" || hideDocs === true)
     setHideSupport(hideSupport === "true" || hideSupport === true)
+    setHideDomainSwitcher(hideDomainSwitcher === "true" || hideDomainSwitcher === true)
     setProdMode(prodmode === "true" || prodmode === true)
   }, [])
 
@@ -53,6 +55,7 @@ App.propTypes = {
   prodmode: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   hideDocs: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   hideSupport: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  hideDomainSwitcher: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 }
 
 const StyledApp = (props = {}) => {

app/javascript/widgets/landing_page/components/layout/PageFooter.jsx

@@ -4,14 +4,8 @@
  */
 
 import React from "react"
-// import { Link } from "react-router-dom"
 
-import {
-  Button,
-  Icon,
-  PageFooter as JunoFooter,
-  Stack,
-} from "@cloudoperators/juno-ui-components"
+import { Button, Icon, PageFooter as JunoFooter, Stack } from "@cloudoperators/juno-ui-components"
 
 import DocumentationIcon from "../../assets/images/icon_documentation.svg"
 import SlackIcon from "../../assets/images/icon_slack.svg"
@@ -39,19 +33,16 @@ const PageFooter = () => {
     <>
       <div className="footer">
         <div className="tw-max-w-[1280px] tw-mx-auto tw-grid tw-grid-rows-[1fr,0.24fr] tw-grid-cols-3 tw-gap-x-20 tw-gap-y-8 tw-pb-12 tw-pt-[calc(2rem+var(--cloud-image-overlap))]">
-          <Stack
-            direction="vertical"
-            className={`tw-row-span-2 tw-bg-juno-grey-blue-11 ${boxStyles}`}
-          >
+          <Stack direction="vertical" className={`tw-row-span-2 tw-bg-juno-grey-blue-11 ${boxStyles}`}>
             <DocumentationIcon className="tw-mb-3" />
             <h5 className={headlineStyles}>
               <span className="tw-text-theme-accent">Documentation</span>
               <br />
               Detailed information
             </h5>
             <p>
-              The documentation has detailed information about all the services
-              that Converged Cloud offers including how-tos and tutorials.
+              The documentation has detailed information about all the services that Converged Cloud offers including
+              how-tos and tutorials.
             </p>
             <div className="tw-mt-auto">
               <Button
@@ -73,8 +64,7 @@ const PageFooter = () => {
               Ask questions and connect with others
             </h5>
             <p className="tw-pb-6">
-              Join the #sap-cc-users channel on Slack to connect with other
-              users or ask questions.
+              Join the #sap-cc-users channel on Slack to connect with other users or ask questions.
             </p>
             <div className="tw-mt-auto">
               <Button
@@ -97,8 +87,8 @@ const PageFooter = () => {
               Contact our support team *
             </h5>
             <p className="tw-pb-6">
-              Our support team is available during EMEA business hours and for
-              emergencies we offer 24/7 premium support.
+              Our support team is available during EMEA business hours and for emergencies we offer 24/7 premium
+              support.
             </p>
             <div className="tw-mt-auto">
               <Button
@@ -122,9 +112,7 @@ const PageFooter = () => {
             <Stack gap="2">
               <div className="tw-text-2xl tw-font-bold tw-py-2 tw-pl-8">*</div>
               <div className="tw-py-2">
-                <div className="tw-text-2xl tw-font-bold">
-                  Premium 24 hour emergency support
-                </div>
+                <div className="tw-text-2xl tw-font-bold">Premium 24 hour emergency support</div>
                 For emergencies in productive systems.
               </div>
               <Stack

app/javascript/widgets/landing_page/components/layout/PageHead.jsx

@@ -15,6 +15,7 @@ const PageHead = () => {
   const selectedDomain = useStore((state) => state.domain)
   const selectedRegion = useStore((state) => state.region)
   const prodMode = useStore((state) => state.prodMode)
+  const hideDomainSwitcher = useStore((state) => state.hideDomainSwitcher)
 
   const handleLoginButtonClick = () => {
     if (selectedRegion && selectedDomain) {
@@ -27,17 +28,27 @@ const PageHead = () => {
   return (
     <PageHeader>
       <Stack className="tw-ml-auto" gap="4" alignment="center">
-        {selectedDomain === "CC3TEST" && (
-          <a
-            href={buildPasswordLoginLink(selectedRegion, selectedDomain, prodMode)}
-            className="tw-text-theme-disabled hover:tw-underline"
-          >
-            Log in with password
-          </a>
-        )}
-        <Button variant="primary" size="small" icon="manageAccounts" title="Log in" onClick={handleLoginButtonClick}>
-          Log in
-        </Button>
+        <>
+          {selectedDomain === "CC3TEST" && (
+            <a
+              href={buildPasswordLoginLink(selectedRegion, selectedDomain, prodMode)}
+              className="tw-text-theme-disabled hover:tw-underline"
+            >
+              Log in with password
+            </a>
+          )}
+          {!hideDomainSwitcher && (
+            <Button
+              variant="primary"
+              size="small"
+              icon="manageAccounts"
+              title="Log in"
+              onClick={handleLoginButtonClick}
+            >
+              Log in
+            </Button>
+          )}
+        </>
       </Stack>
     </PageHeader>
   )

app/javascript/widgets/landing_page/pages/home.jsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback } from "react"
+import React from "react"
 
 import useStore from "../store"
 import CCLogo from "../assets/images/CCloud_Logo_light.svg"
@@ -18,14 +18,19 @@ import { buildDashboardLink } from "../lib/utils"
 import { Button, Icon, Stack } from "@cloudoperators/juno-ui-components"
 
 const Home = () => {
-  const showLoginOverlay = useStore(useCallback((state) => state.showLoginOverlay))
-  const selectedDomain = useStore(useCallback((state) => state.domain))
-  const deselectDomain = useStore(useCallback((state) => state.deselectDomain))
-  const selectedRegion = useStore(useCallback((state) => state.region))
-  const selectRegion = useStore(useCallback((state) => state.selectRegion))
-  const prodMode = useStore(useCallback((state) => state.prodMode))
+  const showLoginOverlay = useStore((state) => state.showLoginOverlay)
+  const selectedDomain = useStore((state) => state.domain)
+  const domainOriginal = useStore((state) => state.domainOriginal)
+  const deselectDomain = useStore((state) => state.deselectDomain)
+  const selectedRegion = useStore((state) => state.region)
+  const selectRegion = useStore((state) => state.selectRegion)
+  const prodMode = useStore((state) => state.prodMode)
+  const hideDomainSwitcher = useStore((state) => state.hideDomainSwitcher)
 
   const handleWorldMapClick = (e) => {
+    if (hideDomainSwitcher) {
+      return
+    }
     if (e.target.dataset.region) {
       selectRegion(e.target.dataset.region)
       showLoginOverlay()
@@ -62,20 +67,34 @@ const Home = () => {
 
         <Stack alignment="center">
           <div className="tw-text-xl tw-w-3/5 tw-mr-auto">
-            {"SAP's "} strategic Infrastructure-as-a-Service (IaaS) stack, optimised for SAP solutions, running purely
+            {"SAP's "} strategic Infrastructure-as-a-Service (IaaS) stack, optimized for SAP solutions, running purely
             in SAP datacenters.
           </div>
           <Stack direction="vertical" alignment="end" gap="1">
-            <Button
-              icon={selectedDomain ? "openInBrowser" : "place"}
-              variant="primary"
-              title={selectedDomain ? `Enter ${selectedDomain}` : "Select region/domain"}
-              className="whitespace-nowrap tw-py-1.5 tw-px-3"
-              onClick={handleHeroButtonClick}
-            >
-              {setHeroButtonText()}
-            </Button>
-            {selectedDomain && (
+            {hideDomainSwitcher ? (
+              <Button
+                icon={"openInBrowser"}
+                variant="primary"
+                className="whitespace-nowrap tw-py-1.5 tw-px-3"
+                onClick={() => {
+                  window.location.href = buildDashboardLink(selectedRegion, domainOriginal, prodMode)
+                }}
+              >
+                {`Enter ${domainOriginal}`}
+              </Button>
+            ) : (
+              <Button
+                icon={selectedDomain ? "openInBrowser" : "place"}
+                variant="primary"
+                title={selectedDomain ? `Enter ${selectedDomain}` : "Select region/domain"}
+                className="whitespace-nowrap tw-py-1.5 tw-px-3"
+                onClick={handleHeroButtonClick}
+              >
+                {setHeroButtonText()}
+              </Button>
+            )}
+
+            {selectedDomain && !hideDomainSwitcher && (
               <a
                 href="#"
                 onClick={handleDomainDeselect}
@@ -95,9 +114,9 @@ const Home = () => {
         }}
       >
         <div className="tw-max-w-[1280px] tw-w-full tw-mx-auto tw-relative">
-          <WorldMapQASelect />
+          {!hideDomainSwitcher && <WorldMapQASelect />}
           <WorldMap
-            className="tw-worldmap tw-w-[90%] tw-h-auto tw-mx-auto"
+            className="tw-worldmap tw-w-full tw-h-auto"
             onClick={handleWorldMapClick}
             data-selected-region={selectedRegion}
           />

app/javascript/widgets/landing_page/store.jsx

@@ -150,7 +150,7 @@ const QA_REGION_KEYS = ["QA-DE-1", "QA-DE-2", "QA-DE-3"]
 
 // global store
 const useStore = create(
-  devtools((set) => ({
+  devtools((set, get) => ({
     loginOverlayVisible: false,
     toggleLoginOverlay: () => set((state) => ({ loginOverlayVisible: !state.loginOverlayVisible })),
     showLoginOverlay: () => set(() => ({ loginOverlayVisible: true })),
@@ -168,8 +168,13 @@ const useStore = create(
     preselectedRegion: null,
     setPreselectedRegion: (propRegion) => set(() => ({ preselectedRegion: propRegion.toUpperCase() })),
 
+    domainOriginal: null,
     domain: null,
     selectDomain: (selectedDomain) => {
+      // this is needed to keep track of the original domain if we hideDomainSwitcher is true
+      if (get().domainOriginal !== selectedDomain) {
+        set(() => ({ domainOriginal: selectedDomain }))
+      }
       // only set if the given value is valid
       if (DOMAIN_KEYS.includes(selectedDomain.toUpperCase()) || selectedDomain.toUpperCase() === "CC3TEST") {
         set(() => ({ domain: selectedDomain.toUpperCase() }))
@@ -189,8 +194,10 @@ const useStore = create(
 
     hideSupport: false,
     hideDocs: false,
+    hideDomainSwitcher: false,
     setHideSupport: (bool) => set(() => ({ hideSupport: bool })),
     setHideDocs: (bool) => set(() => ({ hideDocs: bool })),
+    setHideDomainSwitcher: (bool) => set(() => ({ hideDomainSwitcher: bool })),
   }))
 )
 

app/views/pages/landing.html.haml

@@ -1,4 +1,5 @@
-= javascript_include_tag "landing_page_widget", data: {                     |               
-  hide_support: "#{domain_config.feature_hidden?('support')}",              | 
-  hide_docs: "#{domain_config.feature_hidden?('documentation')}",           | 
+= javascript_include_tag "landing_page_widget", data: {                     |
+  hide_support: "#{domain_config.feature_hidden?('support')}",              |
+  hide_docs: "#{domain_config.feature_hidden?('documentation')}",           |
+  hide_domain_switcher: "#{domain_config.feature_hidden?('domain_switcher')}",         |
   region: "#{current_region}", domain: "#{current_domain}", prodmode: "#{Rails.env.production?}"}

config/support/domain_config.yaml

@@ -1,11 +1,12 @@
-# this config is used to control the visibility of plugins in the navigation, 
+# this config is used to control the visibility of plugins in the navigation,
 # to define floating ip networks.
 domains:
   - name: test
     regex: "__test__"
     disabled_features:
       - documentation
       - support
+      - domain_switcher
     disabled_plugins:
       # following plugins name should be the same as the plugin name in the plugins directory
       - test-plugin
@@ -14,5 +15,5 @@ domains:
       - "test_04"
       - "test_03"
       - "test_02"
-      - "test_01"  
-    dns_c_subdomain: false
+      - "test_01"
+    dns_c_subdomain: false