From 1e965c492b21c3b00eff190d6b2c8d305da32af8 Mon Sep 17 00:00:00 2001 From: Andreas Pfau Date: Fri, 11 Oct 2024 15:43:57 +0200 Subject: [PATCH] feat(bedrock): hide docs and support based on domain config (#1430) --- app/controllers/pages_controller.rb | 16 ++-- app/javascript/lib/widget.jsx | 22 ++--- app/javascript/widgets/landing_page/App.jsx | 56 +++++------ .../components/landingpage/DomainSelect.jsx | 44 +++------ .../components/landingpage/LoginOverlay.jsx | 96 +++++++------------ .../components/landingpage/RegionSelect.jsx | 36 ++----- .../landingpage/WorldMapQASelect.jsx | 28 ++---- .../widgets/landing_page/pages/home.jsx | 29 ++---- app/javascript/widgets/landing_page/store.jsx | 71 +++++--------- app/views/application/_footer.html.haml | 5 +- app/views/layouts/noscope.html.haml | 3 +- app/views/pages/landing.html.haml | 5 +- config/initializers/domain_config.rb | 6 +- config/support/domain_config.yaml | 3 + .../app/views/identity/domains/show.html.haml | 43 ++++----- 15 files changed, 167 insertions(+), 296 deletions(-) diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 0d4a865b25..a896762274 100644 --- a/app/controllers/pages_controller.rb +++ b/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 \ No newline at end of file diff --git a/app/javascript/lib/widget.jsx b/app/javascript/lib/widget.jsx index 212936f43b..63e13fa170 100644 --- a/app/javascript/lib/widget.jsx +++ b/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,19 +71,14 @@ 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( <> - {this.config.params.flashescontainer !== "custom" && ( - - )} + {this.config.params.flashescontainer !== "custom" && } {wrappedComponent} @@ -93,9 +86,7 @@ class Widget { } else { createRoot(reactContainer).render( <> - {this.config.params.flashescontainer !== "custom" && ( - - )} + {this.config.params.flashescontainer !== "custom" && } {wrappedComponent} ) @@ -157,7 +148,7 @@ 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) { @@ -165,8 +156,7 @@ export const createWidget = (dirname, options = {}) => { } } - const loadWidget = () => - new Widget(reactContainers, createConfig(widgetName, params)) + const loadWidget = () => new Widget(reactContainers, createConfig(widgetName, params)) if (document.readyState === "complete") return Promise.resolve(loadWidget()) diff --git a/app/javascript/widgets/landing_page/App.jsx b/app/javascript/widgets/landing_page/App.jsx index a14d1f9f3e..1c0a7ae171 100644 --- a/app/javascript/widgets/landing_page/App.jsx +++ b/app/javascript/widgets/landing_page/App.jsx @@ -3,7 +3,8 @@ * 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" @@ -11,48 +12,49 @@ 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 -
+
- + {hideSupport !== "true" && hideSupport !== true && }
) } +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 ( diff --git a/app/javascript/widgets/landing_page/components/landingpage/DomainSelect.jsx b/app/javascript/widgets/landing_page/components/landingpage/DomainSelect.jsx index 13cc036919..f7bbf54b7f 100644 --- a/app/javascript/widgets/landing_page/components/landingpage/DomainSelect.jsx +++ b/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"}
-

- General Purpose -

+

General Purpose

{domains.general.map((domain) => ( { >
{domain?.name}
{domain?.description}
-
- +
+
-

- Special Purpose -

+

Special Purpose

{domains.special.map((domain) => ( - +
{domain}
-
- +
+
diff --git a/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx b/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx index 5b05e0b9f6..af045e3a7f 100644 --- a/app/javascript/widgets/landing_page/components/landingpage/LoginOverlay.jsx +++ b/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 = () => { deselectRegion()} - className={`${tabClasses( - !isValidRegionSelected - )} ${tabLinkClasses(!isValidRegionSelected)}`} + className={`${tabClasses(!isValidRegionSelected)} ${tabLinkClasses(!isValidRegionSelected)}`} > 1. Choose your region -
- 2. Choose your domain -
+
2. Choose your domain
-
- {isValidRegionSelected ? : } -
+
{isValidRegionSelected ? : }
-
- -
-
New here?
-

- Have a look at the Getting Started{" "} - section of our documentation -

-
-
- -
- -
+ {!hideDocs && ( +
+ +
+
New here?
+

+ Have a look at the Getting Started section of our documentation +

+
+
+ +
+ +
+ )}
) } diff --git a/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx b/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx index 1f10dac08a..8451c838a5 100644 --- a/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.jsx +++ b/app/javascript/widgets/landing_page/components/landingpage/RegionSelect.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 FlagCloud from "../../assets/images/flag_ccloud.svg" @@ -11,28 +11,17 @@ import FlagCloud from "../../assets/images/flag_ccloud.svg" import { Stack } from "@cloudoperators/juno-ui-components" const RegionSelect = () => { - const selectRegion = useStore(useCallback((state) => state.selectRegion)) - const preselectedRegion = useStore( - useCallback((state) => state.preselectedRegion) - ) - const qaRegionKeys = useStore(useCallback((state) => state.qaRegionKeys)) - const regionsByContinent = useStore( - useCallback((state) => state.regionsByContinent) - ) + const selectRegion = useStore((state) => state.selectRegion) + const preselectedRegion = useStore((state) => state.preselectedRegion) + const qaRegionKeys = useStore((state) => state.qaRegionKeys) + const regionsByContinent = useStore((state) => state.regionsByContinent) return ( <> {regionsByContinent.map((continent) => ( - -
- {continent.name} -
+ +
{continent.name}
{continent.regions.map((region) => ( { ))} {preselectedRegion?.startsWith("QA") && (
-
- QA REGIONS -
+
QA REGIONS
{qaRegionKeys.map((region) => ( {
- //
selectRegion(region)} - // className="font-bold bg-juno-grey-blue-9 py-3 px-5 cursor-pointer hover:bg-theme-accent hover:text-black" - // > - // {region} - //
))}
diff --git a/app/javascript/widgets/landing_page/components/landingpage/WorldMapQASelect.jsx b/app/javascript/widgets/landing_page/components/landingpage/WorldMapQASelect.jsx index de18750224..8d4419f2ae 100644 --- a/app/javascript/widgets/landing_page/components/landingpage/WorldMapQASelect.jsx +++ b/app/javascript/widgets/landing_page/components/landingpage/WorldMapQASelect.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 { Stack } from "@cloudoperators/juno-ui-components" @@ -22,12 +22,10 @@ const qaRegionStyles = (isSelected) => ` // The reason is that we don't want to show the QA regions on the landing pages of the productive regions // so you'll see the QA select only if you started out on a QA region const WorldMapQASelect = () => { - const selectedRegion = useStore(useCallback((state) => state.region)) - const preselectedRegion = useStore( - useCallback((state) => state.preselectedRegion) - ) - const selectRegion = useStore(useCallback((state) => state.selectRegion)) - const qaRegionKeys = useStore(useCallback((state) => state.qaRegionKeys)) + const selectedRegion = useStore((state) => state.region) + const preselectedRegion = useStore((state) => state.preselectedRegion) + const selectRegion = useStore((state) => state.selectRegion) + const qaRegionKeys = useStore((state) => state.qaRegionKeys) const handleQARegionClick = (e, qaRegion) => { e.preventDefault() @@ -39,20 +37,10 @@ const WorldMapQASelect = () => { return ( <> {preselectedRegion?.startsWith("QA") && ( - + {qaRegionKeys.map((qaRegion) => ( - handleQARegionClick(e, qaRegion)} - > -
- {qaRegion} -
+ handleQARegionClick(e, qaRegion)}> +
{qaRegion}
 ))} diff --git a/app/javascript/widgets/landing_page/pages/home.jsx b/app/javascript/widgets/landing_page/pages/home.jsx index 3536bdd389..929fc1f4a6 100644 --- a/app/javascript/widgets/landing_page/pages/home.jsx +++ b/app/javascript/widgets/landing_page/pages/home.jsx @@ -18,9 +18,7 @@ import { buildDashboardLink } from "../lib/utils" import { Button, Icon, Stack } from "@cloudoperators/juno-ui-components" const Home = () => { - const showLoginOverlay = useStore( - useCallback((state) => state.showLoginOverlay) - ) + 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)) @@ -36,11 +34,7 @@ const Home = () => { const handleHeroButtonClick = () => { if (selectedRegion && selectedDomain) { - window.location.href = buildDashboardLink( - selectedRegion, - selectedDomain, - prodMode - ) + window.location.href = buildDashboardLink(selectedRegion, selectedDomain, prodMode) } else { showLoginOverlay() } @@ -64,25 +58,18 @@ const Home = () => {
- +
- {"SAP's "} strategic Infrastructure-as-a-Service (IaaS) stack, - optimised for SAP solutions, running purely in SAP datacenters. + {"SAP's "} strategic Infrastructure-as-a-Service (IaaS) stack, optimised for SAP solutions, running purely + in SAP datacenters.