From 0f7d86e99366c18993417a26beb8976abe424c1e Mon Sep 17 00:00:00 2001 From: Scott J Dickerson Date: Tue, 16 Jan 2024 12:40:05 -0500 Subject: [PATCH] client about and masthead to use 'useBranding' hook Signed-off-by: Scott J Dickerson --- branding/strings.json | 2 +- client/public/locales/en/translation.json | 4 +- client/src/app/hooks/useBranding.ts | 12 ++++ .../layout/AppAboutModal/AppAboutModal.tsx | 71 ++++++++----------- client/src/app/layout/HeaderApp/HeaderApp.tsx | 45 ++---------- common/src/branding.ts | 2 +- 6 files changed, 50 insertions(+), 86 deletions(-) create mode 100644 client/src/app/hooks/useBranding.ts diff --git a/branding/strings.json b/branding/strings.json index c42a6275cd..116aa41ce5 100644 --- a/branding/strings.json +++ b/branding/strings.json @@ -6,7 +6,7 @@ }, "about": { "displayName": "Konveyor", - "image": "<%= brandingRoot %>/images/masthead-logo.svg", + "imageSrc": "<%= brandingRoot %>/images/masthead-logo.svg", "documentationUrl": "https://konveyor.github.io/konveyor/" }, "masthead": { diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json index f97c91fc29..da93ce3cd4 100644 --- a/client/public/locales/en/translation.json +++ b/client/public/locales/en/translation.json @@ -1,8 +1,8 @@ { "about": { "about": "About", - "bottom1": "{{brandType}} is a project within the", - "bottom2": "For more information, refer to", + "bottom1": "{{brandType}} is a project within the <2>Konveyor community.", + "bottom2": "For more information, refer to <1>{{brandType}} documentation.", "description": "{{brandType}} allows users to maintain their portfolio of applications with a full set of metadata and to assess their suitability for modernization leveraging a questionnaire based approach.", "iconLibrary": "The Icon Library used in this project is a derivative of the <2>Standard Icons library by <5>Red Hat, used under <8>CC BY 4.0", "introduction": "{{brandType}} is a collection of tools that supports large-scale application modernization and migration projects to Kubernetes." diff --git a/client/src/app/hooks/useBranding.ts b/client/src/app/hooks/useBranding.ts new file mode 100644 index 0000000000..cb90e35112 --- /dev/null +++ b/client/src/app/hooks/useBranding.ts @@ -0,0 +1,12 @@ +import { BrandingStrings, brandingStrings } from "@konveyor-ui/common"; + +/** + * Wrap the branding strings in a hook so components access it in a standard + * React way instead of a direct import. This allows the branding implementation + * to change in future with a minimal amount of refactoring in existing components. + */ +export const useBranding = (): BrandingStrings => { + return brandingStrings; +}; + +export default useBranding; diff --git a/client/src/app/layout/AppAboutModal/AppAboutModal.tsx b/client/src/app/layout/AppAboutModal/AppAboutModal.tsx index 04a91f45e4..da50752bcf 100644 --- a/client/src/app/layout/AppAboutModal/AppAboutModal.tsx +++ b/client/src/app/layout/AppAboutModal/AppAboutModal.tsx @@ -9,78 +9,63 @@ import { TextList, TextListItem, } from "@patternfly/react-core"; - -import konveyorBrandImage from "@app/images/Konveyor-white-logo.svg"; -import mtaBrandImage from "@app/images/logoRedHat.svg"; import { ENV } from "@app/env"; +import useBranding from "@app/hooks/useBranding"; export interface AppAboutModalProps { isOpen: boolean; onClose: () => void; } -const APP_BRAND = "konveyor"; // TODO: !!!REMOVE THIS!!! - export const AppAboutModal: React.FC = ({ isOpen, onClose, }) => { const { t } = useTranslation(); - - // TODO: Pull this path from branding - const brandImageSrc = - APP_BRAND === "konveyor" ? konveyorBrandImage : mtaBrandImage; - - // TODO: Pull this from branding/strings.json - const brandName = - APP_BRAND === "konveyor" - ? "Konveyor" - : "Migration Toolkit for Applications"; - - // TODO: Pull this from branding/strings.json - const brandDocumentationUrl = - APP_BRAND === "konveyor" - ? "https://konveyor.github.io/konveyor/" - : "https://access.redhat.com/documentation/en-us/migration_toolkit_for_applications"; + const { about } = useBranding(); return ( {t("about.about")} - {t("about.introduction", { brandType: brandName })} + {t("about.introduction", { brandType: about.displayName })} - {t("about.description", { brandType: brandName })} + {t("about.description", { brandType: about.displayName })} - {t("about.bottom1", { brandType: brandName })}{" "} - - Konveyor community - - . + + {{ brandType: about.displayName }} is a project within the + + Konveyor community + + . + - {t("about.bottom2")}{" "} - - {brandName} documentation - - . + + For more information, refer to + + {{ brandType: about.displayName }} documentation + + . + diff --git a/client/src/app/layout/HeaderApp/HeaderApp.tsx b/client/src/app/layout/HeaderApp/HeaderApp.tsx index 5dafcc5b2f..a36705672a 100644 --- a/client/src/app/layout/HeaderApp/HeaderApp.tsx +++ b/client/src/app/layout/HeaderApp/HeaderApp.tsx @@ -10,7 +10,6 @@ import { MastheadToggle, PageToggleButton, Title, - TitleProps, Toolbar, ToolbarContent, ToolbarGroup, @@ -18,51 +17,19 @@ import { } from "@patternfly/react-core"; import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon"; import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon"; + +import useBranding from "@app/hooks/useBranding"; import { AppAboutModalState } from "../AppAboutModalState"; import { SSOMenu } from "./SSOMenu"; import { MobileDropdown } from "./MobileDropdown"; -// import konveyorBrandImage from "@app/images/Konveyor-white-logo.svg"; -// import logoRedHat from "@app/images/logoRedHat.svg"; import "./header.css"; -interface BrandData { - src: string; - alt: string; - height: string; -} - -interface TitleData { - text: string; - heading?: TitleProps["headingLevel"]; - size?: TitleProps["size"]; -} - -const { leftBrand, leftTitle, rightBrand } = go(); - -// TODO: replace go() with the correct thing from branding -function go(): { - leftBrand: BrandData | null; - leftTitle: TitleData | null; - rightBrand: BrandData | null; -} { - return { - // leftBrand: null, - leftBrand: { - src: "branding/images/masthead-logo.svg", - alt: "brand", - height: "60px", - }, - - leftTitle: null, - // leftTitle: { text: "Migration Toolkit for Applications" }, - - rightBrand: null, - // rightBrand: { src: logoRedHat, alt: "Red Hat Logo", height: "30px" }, - }; -} - export const HeaderApp: React.FC = () => { + const { + masthead: { leftBrand, leftTitle, rightBrand }, + } = useBranding(); + const toolbar = ( diff --git a/common/src/branding.ts b/common/src/branding.ts index 8ec5c0b44b..22308ed075 100644 --- a/common/src/branding.ts +++ b/common/src/branding.ts @@ -19,7 +19,7 @@ export interface BrandingStrings { about: { displayName: string; - image: string; + imageSrc: string; documentationUrl: string; };