feat(bedrock): hide docs and support based on domain config (#1430)

app/controllers/pages_controller.rb

@@ -3,15 +3,7 @@ class PagesController < ActionController::Base
 
   layout :layout_for_page
 
-  helper_method :current_region, :current_domain
-
-  # after_action do
-  #   cookies['test-cookie'] = {
-  #      :value => 'a yummy cookie',
-  #      :expires => 1.year.from_now,
-  #      :domain => 'domain.com'
-  #    }
-  # end
+  helper_method :current_region, :current_domain, :domain_config
 
   private
 
@@ -23,6 +15,10 @@ def current_domain
     params[:domain_id]
   end
 
+  def domain_config    # the presence of this variable is tested in spec/controllers/scope_controller_spec.rb
+    @domain_config ||= DomainConfig.new(current_domain)
+  end
+
   def layout_for_page
     case params[:id]
     when "landing"
@@ -31,4 +27,4 @@ def layout_for_page
       "noscope"
     end
   end
-end
+end

app/javascript/lib/widget.jsx

@@ -34,9 +34,7 @@ const setAttributes = (element, attributes) => {
 class Widget {
   constructor(reactContainers, config) {
     // reactContainers should always be an array (support global widgets)
-    this.reactContainers = isIterable(reactContainers)
-      ? reactContainers
-      : [reactContainers]
+    this.reactContainers = isIterable(reactContainers) ? reactContainers : [reactContainers]
     this.config = config
     this.createStore = this.createStore.bind(this)
     this.render = this.render.bind(this)
@@ -73,29 +71,22 @@ class Widget {
     // const Container = React.createElement(container, this.config.params)
     for (let reactContainer of this.reactContainers) {
       let dataset = getDataset(reactContainer)
-      let wrappedComponent = React.createElement(
-        container,
-        Object.assign({}, dataset, this.config.params)
-      )
+      let wrappedComponent = React.createElement(container, Object.assign({}, dataset, this.config.params))
 
       if (!reactContainer) continue
       if (this.store) {
         createRoot(reactContainer).render(
           <Provider store={this.store}>
             <>
-              {this.config.params.flashescontainer !== "custom" && (
-                <FlashMessages />
-              )}
+              {this.config.params.flashescontainer !== "custom" && <FlashMessages />}
               {wrappedComponent}
             </>
           </Provider>
         )
       } else {
         createRoot(reactContainer).render(
           <>
-            {this.config.params.flashescontainer !== "custom" && (
-              <FlashMessages />
-            )}
+            {this.config.params.flashescontainer !== "custom" && <FlashMessages />}
             {wrappedComponent}
           </>
         )
@@ -157,16 +148,15 @@ export const createWidget = (dirname, options = {}) => {
   }
 
   let htmlOptions = options.html || {}
-  let defaultHtmlOptions = { class: ".react-widget-content" }
+  let defaultHtmlOptions = { class: "react-widget-content", style: "height: 100%;" }
   htmlOptions = Object.assign({}, defaultHtmlOptions, htmlOptions)
   for (let attr in htmlOptions) {
     for (let reactContainer of reactContainers) {
       if (reactContainer) reactContainer.setAttribute(attr, htmlOptions[attr])
     }
   }
 
-  const loadWidget = () =>
-    new Widget(reactContainers, createConfig(widgetName, params))
+  const loadWidget = () => new Widget(reactContainers, createConfig(widgetName, params))
 
   if (document.readyState === "complete") return Promise.resolve(loadWidget())
 

app/javascript/widgets/landing_page/App.jsx

@@ -3,56 +3,58 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useEffect } from "react"
+import React, { useEffect } from "react"
+import PropTypes from "prop-types"
 import PageFooter from "./components/layout/PageFooter"
 import PageHead from "./components/layout/PageHead"
 import Home from "./pages/home"
 import styles from "./styles.scss?inline"
 import useStore from "./store"
 import { AppShellProvider } from "@cloudoperators/juno-ui-components"
 
-const App = (props) => {
-  const loginOverlayVisible = useStore(
-    useCallback((state) => state.loginOverlayVisible)
-  )
-  const selectRegion = useStore(useCallback((state) => state.selectRegion))
-  const setPreselectedRegion = useStore(
-    useCallback((state) => state.setPreselectedRegion)
-  )
-  const selectDomain = useStore(useCallback((state) => state.selectDomain))
-  const setProdMode = useStore(useCallback((state) => state.setProdMode))
+const App = ({ region, domain, prodmode, hideDocs, hideSupport }) => {
+  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)
 
-  // if a preselected region or domain has been passed into the app be sure to set them in the state
   useEffect(() => {
-    if (props.region) {
-      selectRegion(props.region.toUpperCase())
-      setPreselectedRegion(props.region.toUpperCase())
-    }
-    if (props.domain) {
-      selectDomain(props.domain.toUpperCase())
+    if (region) {
+      selectRegion(region.toUpperCase())
+      setPreselectedRegion(region.toUpperCase())
     }
-    if (props.prodmode) {
-      setProdMode(props.prodmode === "true")
+    if (domain) {
+      selectDomain(domain.toUpperCase())
     }
-  }, [props.region, props.domain, props.prodmode])
+    setHideDocs(hideDocs === "true" || hideDocs === true)
+    setHideSupport(hideSupport === "true" || hideSupport === true)
+    setProdMode(prodmode === "true" || prodmode === true)
+  }, [])
 
   return (
     // use custom style cache to avoid conflicts with other apps
-    <div
-      className={`tw-flex tw-flex-col tw-h-full ${
-        loginOverlayVisible ? "tw-overflow-hidden tw-h-full" : ""
-      }`}
-    >
+    <div className={`tw-flex tw-flex-col tw-h-full ${loginOverlayVisible ? "tw-overflow-hidden tw-h-full" : ""}`}>
       <div className="tw-flex tw-flex-col tw-grow">
         <PageHead />
 
         <Home />
-        <PageFooter />
+        {hideSupport !== "true" && hideSupport !== true && <PageFooter />}
       </div>
     </div>
   )
 }
 
+App.propTypes = {
+  region: PropTypes.string,
+  domain: PropTypes.string,
+  prodmode: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  hideDocs: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  hideSupport: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+}
+
 const StyledApp = (props = {}) => {
   return (
     <AppShellProvider>

app/javascript/widgets/landing_page/components/landingpage/DomainSelect.jsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, useMemo } from "react"
+import React, { useMemo } from "react"
 
 import useStore from "../../store"
 import { buildDashboardLink } from "../../lib/utils"
@@ -30,10 +30,10 @@ const iconClasses = `
 `
 
 const DomainSelect = () => {
-  const selectedRegionKey = useStore(useCallback((state) => state.region))
-  const regions = useStore(useCallback((state) => state.regions))
-  const domains = useStore(useCallback((state) => state.domains))
-  const prodMode = useStore(useCallback((state) => state.prodMode))
+  const selectedRegionKey = useStore((state) => state.region)
+  const regions = useStore((state) => state.regions)
+  const domains = useStore((state) => state.domains)
+  const prodMode = useStore((state) => state.prodMode)
 
   const selectedRegion = useMemo(() => {
     return regions[selectedRegionKey]
@@ -49,9 +49,7 @@ const DomainSelect = () => {
           {selectedRegion?.country || "QA"}
         </div>
       </Stack>
-      <h4 className="tw-text-lg tw-uppercase tw-mt-10 tw-mb-3">
-        General Purpose
-      </h4>
+      <h4 className="tw-text-lg tw-uppercase tw-mt-10 tw-mb-3">General Purpose</h4>
       <div className="tw-grid tw-grid-cols-3 tw-gap-4">
         {domains.general.map((domain) => (
           <a
@@ -61,40 +59,22 @@ const DomainSelect = () => {
           >
             <h5 className="tw-font-bold tw-pb-1">{domain?.name}</h5>
             <div className="tw-pr-9">{domain?.description}</div>
-            <div
-              className={`${iconClasses} tw-opacity-40 tw-block tw-group-hover:hidden`}
-            >
-              <Icon
-                icon="autoAwesomeMotion"
-                color="tw-text-theme-high"
-                size="36"
-              />
+            <div className={`${iconClasses} tw-opacity-40 tw-block tw-group-hover:hidden`}>
+              <Icon icon="autoAwesomeMotion" color="tw-text-theme-high" size="36" />
             </div>
             <div className={`${iconClasses} tw-hidden group-hover:tw-block`}>
               <Icon icon="openInBrowser" color="text-black" size="36" />
             </div>
           </a>
         ))}
       </div>
-      <h4 className="tw-text-lg tw-uppercase tw-mt-12 tw-mb-3">
-        Special Purpose
-      </h4>
+      <h4 className="tw-text-lg tw-uppercase tw-mt-12 tw-mb-3">Special Purpose</h4>
       <div className="tw-grid tw-grid-cols-6 tw-gap-4">
         {domains.special.map((domain) => (
-          <a
-            href={buildDashboardLink(selectedRegionKey, domain, prodMode)}
-            className={domainCardClasses}
-            key={domain}
-          >
+          <a href={buildDashboardLink(selectedRegionKey, domain, prodMode)} className={domainCardClasses} key={domain}>
             <h5 className="tw-font-bold tw-pb-1">{domain}</h5>
-            <div
-              className={`${iconClasses} tw-opacity-40 tw-block group-hover:tw-hidden`}
-            >
-              <Icon
-                icon="autoAwesomeMotion"
-                color="tw-text-theme-high"
-                size="36"
-              />
+            <div className={`${iconClasses} tw-opacity-40 tw-block group-hover:tw-hidden`}>
+              <Icon icon="autoAwesomeMotion" color="tw-text-theme-high" size="36" />
             </div>
             <div className={`${iconClasses} tw-hidden group-hover:tw-block`}>
               <Icon icon="openInBrowser" color="text-black" size="36" />

app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo, useCallback } from "react"
+import React, { useMemo } from "react"
 
 import useStore from "../../store"
 
@@ -39,11 +39,7 @@ const tabClasses = (isActive) => {
     tw-pb-3 
     tw-px-24 
     -tw-mb-0.5
-    ${
-      isActive
-        ? "tw-cursor-default tw-text-theme-high tw-border-b-3 tw-border-theme-accent"
-        : ""
-    }
+    ${isActive ? "tw-cursor-default tw-text-theme-high tw-border-b-3 tw-border-theme-accent" : ""}
     `
 }
 
@@ -54,23 +50,15 @@ const tabLinkClasses = (isActive) => {
 }
 
 const LoginOverlay = () => {
-  const loginOverlayVisible = useStore(
-    useCallback((state) => state.loginOverlayVisible)
-  )
-  const hideLoginOverlay = useStore(
-    useCallback((state) => state.hideLoginOverlay)
-  )
-  const selectedRegion = useStore(useCallback((state) => state.region))
-  const deselectRegion = useStore(useCallback((state) => state.deselectRegion))
-  const regionKeys = useStore(useCallback((state) => state.regionKeys))
-  const qaRegionKeys = useStore(useCallback((state) => state.qaRegionKeys))
-
+  const loginOverlayVisible = useStore((state) => state.loginOverlayVisible)
+  const hideLoginOverlay = useStore((state) => state.hideLoginOverlay)
+  const selectedRegion = useStore((state) => state.region)
+  const deselectRegion = useStore((state) => state.deselectRegion)
+  const regionKeys = useStore((state) => state.regionKeys)
+  const qaRegionKeys = useStore((state) => state.qaRegionKeys)
+  const hideDocs = useStore((state) => state.hideDocs)
   const isValidRegionSelected = useMemo(() => {
-    return (
-      selectedRegion !== null &&
-      (regionKeys.includes(selectedRegion) ||
-        qaRegionKeys.includes(selectedRegion))
-    )
+    return selectedRegion !== null && (regionKeys.includes(selectedRegion) || qaRegionKeys.includes(selectedRegion))
   }, [selectedRegion])
 
   return (
@@ -92,51 +80,39 @@ const LoginOverlay = () => {
             <a
               href="#"
               onClick={() => deselectRegion()}
-              className={`${tabClasses(
-                !isValidRegionSelected
-              )} ${tabLinkClasses(!isValidRegionSelected)}`}
+              className={`${tabClasses(!isValidRegionSelected)} ${tabLinkClasses(!isValidRegionSelected)}`}
             >
               1. Choose your region
             </a>
-            <div className={tabClasses(isValidRegionSelected)}>
-              2. Choose your domain
-            </div>
+            <div className={tabClasses(isValidRegionSelected)}>2. Choose your domain</div>
           </Stack>
         </nav>
-        <div className="tw-w-full">
-          {isValidRegionSelected ? <DomainSelect /> : <RegionSelect />}
-        </div>
+        <div className="tw-w-full">{isValidRegionSelected ? <DomainSelect /> : <RegionSelect />}</div>
       </div>
 
-      <div className="tw-w-full tw-bg-juno-grey-blue-10 tw-mt-auto">
-        <Stack
-          alignment="center"
-          className="documentation-banner tw-max-w-screen-xl tw-mx-auto tw-py-10"
-        >
-          <div>
-            <h5 className="tw-text-3xl">New here?</h5>
-            <p>
-              Have a look at the <span className="italic">Getting Started</span>{" "}
-              section of our documentation
-            </p>
-          </div>
-          <div className="tw-ml-auto tw-pl-8 tw-pr-20">
-            <Button
-              variant="primary"
-              title="Go to documentation"
-              href="https://documentation.global.cloud.sap/docs/start-userreg"
-              target="_blank"
-            >
-              <Icon
-                icon="openInNew"
-                color="tw-text-theme-high"
-                className=" tw-mr-2"
-              />
-              Go to documentation
-            </Button>
-          </div>
-        </Stack>
-      </div>
+      {!hideDocs && (
+        <div className="tw-w-full tw-bg-juno-grey-blue-10 tw-mt-auto">
+          <Stack alignment="center" className="documentation-banner tw-max-w-screen-xl tw-mx-auto tw-py-10">
+            <div>
+              <h5 className="tw-text-3xl">New here?</h5>
+              <p>
+                Have a look at the <span className="italic">Getting Started</span> section of our documentation
+              </p>
+            </div>
+            <div className="tw-ml-auto tw-pl-8 tw-pr-20">
+              <Button
+                variant="primary"
+                title="Go to documentation"
+                href="https://documentation.global.cloud.sap/docs/start-userreg"
+                target="_blank"
+              >
+                <Icon icon="openInNew" color="tw-text-theme-high" className=" tw-mr-2" />
+                Go to documentation
+              </Button>
+            </div>
+          </Stack>
+        </div>
+      )}
     </div>
   )
 }