client about and masthead to use 'useBranding' hook

Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Jan 16, 2024 · 0f7d86e · 0f7d86e
1 parent 2de9539
commit 0f7d86e
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 86 deletions.
diff --git 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
@@ -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</2>.",
+    "bottom2": "For more information, refer to <1>{{brandType}} documentation</1>.",
     "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</2> by <5>Red Hat</5>, used under <8>CC BY 4.0</8>",
     "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
@@ -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
@@ -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<AppAboutModalProps> = ({
   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 (
     <AboutModal
       isOpen={isOpen}
       onClose={onClose}
       trademark="COPYRIGHT © 2022."
-      brandImageSrc={brandImageSrc}
+      brandImageSrc={about.imageSrc ?? undefined}
       brandImageAlt="Logo"
-      productName={brandName}
+      productName={about.displayName}
     >
       <TextContent>
         <Text component={TextVariants.h4}>{t("about.about")}</Text>
         <Text component={TextVariants.p}>
-          {t("about.introduction", { brandType: brandName })}
+          {t("about.introduction", { brandType: about.displayName })}
         </Text>
         <Text component={TextVariants.p}>
-          {t("about.description", { brandType: brandName })}
+          {t("about.description", { brandType: about.displayName })}
         </Text>
         <Text component={TextVariants.p}>
-          {t("about.bottom1", { brandType: brandName })}{" "}
-          <Text
-            component={TextVariants.a}
-            href="https://www.konveyor.io/"
-            target="_blank"
-          >
-            Konveyor community
-          </Text>
-          .
+          <Trans i18nKey={"about.bottom1"}>
+            {{ brandType: about.displayName }} is a project within the
+            <Text
+              component={TextVariants.a}
+              href="https://www.konveyor.io/"
+              target="_blank"
+            >
+              Konveyor community
+            </Text>
+            .
+          </Trans>
         </Text>
         <Text component={TextVariants.p}>
-          {t("about.bottom2")}{" "}
-          <Text
-            component={TextVariants.a}
-            href={brandDocumentationUrl}
-            target="_blank"
-          >
-            {brandName} documentation
-          </Text>
-          .
+          <Trans i18nKey={"about.bottom2"}>
+            For more information, refer to
+            <Text
+              component={TextVariants.a}
+              href={about.documentationUrl}
+              target="_blank"
+            >
+              {{ brandType: about.displayName }} documentation
+            </Text>
+            .
+          </Trans>
         </Text>
         <Text component={TextVariants.p}>
           <Trans i18nKey="about.iconLibrary">

diff --git a/client/src/app/layout/HeaderApp/HeaderApp.tsx b/client/src/app/layout/HeaderApp/HeaderApp.tsx
@@ -10,59 +10,26 @@ import {
   MastheadToggle,
   PageToggleButton,
   Title,
-  TitleProps,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
   ToolbarItem,
 } 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 = (
     <Toolbar isFullHeight isStatic>
       <ToolbarContent>

diff --git 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;
   };