✨ Add support & openapi links (#438)

Signed-off-by: Carlos Feria <2582866+carlosthe19916@users.noreply.github.com>

Author: carlosthe19916

branding/strings.json

@@ -16,6 +16,7 @@
       "height": "40px"
     },
     "leftTitle": null,
-    "rightBrand": null
+    "rightBrand": null,
+    "supportUrl": "https://github.com/trustification/trustify/issues"
   }
 }

client/src/app/layout/header.tsx

@@ -6,12 +6,11 @@ import { useNavigate } from "react-router-dom";
 import {
   Avatar,
   Brand,
-  Button,
-  ButtonVariant,
   Divider,
   Dropdown,
   DropdownItem,
   DropdownList,
+  Icon,
   Masthead,
   MastheadBrand,
   MastheadContent,
@@ -30,6 +29,7 @@ import {
 import EllipsisVIcon from "@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon";
 import HelpIcon from "@patternfly/react-icons/dist/esm/icons/help-icon";
 import BarsIcon from "@patternfly/react-icons/dist/js/icons/bars-icon";
+import ExternalLinkAltIcon from "@patternfly/react-icons/dist/js/icons/external-link-alt-icon";
 
 import { isAuthRequired } from "@app/Constants";
 import useBranding from "@app/hooks/useBranding";
@@ -39,22 +39,26 @@ import { AboutApp } from "./about";
 
 export const HeaderApp: React.FC = () => {
   const {
-    masthead: { leftBrand, leftTitle, rightBrand },
+    masthead: { leftBrand, leftTitle, rightBrand, supportUrl },
   } = useBranding();
 
   const auth = (isAuthRequired && useAuth()) || undefined;
 
   const navigate = useNavigate();
 
-  const [isAboutOpen, toggleIsAboutOpen] = useReducer((state) => !state, false);
+  const [isAboutModalOpen, toggleIsAboutModalOpen] = useReducer(
+    (state) => !state,
+    false,
+  );
+  const [isHelpDropdownOpen, setIsHelpDropdownOpen] = useState(false);
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
   const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
 
-  const onKebabDropdownToggle = () => {
-    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  const onHelpDropdownToggle = () => {
+    setIsHelpDropdownOpen(!isHelpDropdownOpen);
   };
 
-  const onKebabDropdownSelect = () => {
+  const onKebabDropdownToggle = () => {
     setIsKebabDropdownOpen(!isKebabDropdownOpen);
   };
 
@@ -70,7 +74,7 @@ export const HeaderApp: React.FC = () => {
 
   return (
     <>
-      <AboutApp isOpen={isAboutOpen} onClose={toggleIsAboutOpen} />
+      <AboutApp isOpen={isAboutModalOpen} onClose={toggleIsAboutModalOpen} />
 
       <Masthead>
         <MastheadToggle>
@@ -122,14 +126,48 @@ export const HeaderApp: React.FC = () => {
                 }}
               >
                 <ToolbarItem>
-                  <Button
-                    id="about-button"
-                    aria-label="about button"
-                    variant={ButtonVariant.plain}
-                    onClick={toggleIsAboutOpen}
+                  <Dropdown
+                    isOpen={isHelpDropdownOpen}
+                    onSelect={onHelpDropdownToggle}
+                    onOpenChange={(isOpen: boolean) =>
+                      setIsHelpDropdownOpen(isOpen)
+                    }
+                    popperProps={{ position: "right" }}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onHelpDropdownToggle}
+                        isExpanded={isHelpDropdownOpen}
+                        variant="plain"
+                        aria-label="About"
+                      >
+                        <HelpIcon />
+                      </MenuToggle>
+                    )}
                   >
-                    <HelpIcon />
-                  </Button>
+                    <DropdownList>
+                      {supportUrl && (
+                        <DropdownItem
+                          key="support"
+                          component="a"
+                          to={supportUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Support{" "}
+                          <Icon isInline iconSize="sm">
+                            <ExternalLinkAltIcon />
+                          </Icon>
+                        </DropdownItem>
+                      )}
+                      <DropdownItem
+                        key="about"
+                        onClick={toggleIsAboutModalOpen}
+                      >
+                        About
+                      </DropdownItem>
+                    </DropdownList>
+                  </Dropdown>
                 </ToolbarItem>
               </ToolbarGroup>
 
@@ -143,7 +181,7 @@ export const HeaderApp: React.FC = () => {
                 <ToolbarItem>
                   <Dropdown
                     isOpen={isKebabDropdownOpen}
-                    onSelect={onKebabDropdownSelect}
+                    onSelect={onKebabDropdownToggle}
                     onOpenChange={(isOpen: boolean) =>
                       setIsKebabDropdownOpen(isOpen)
                     }
@@ -156,7 +194,7 @@ export const HeaderApp: React.FC = () => {
                         variant="plain"
                         aria-label="About"
                       >
-                        <EllipsisVIcon aria-hidden="true" />
+                        <EllipsisVIcon />
                       </MenuToggle>
                     )}
                   >
@@ -167,8 +205,25 @@ export const HeaderApp: React.FC = () => {
                         </DropdownItem>
                       )}
                       <Divider key="separator" component="li" />
-                      <DropdownItem key="about" onClick={toggleIsAboutOpen}>
-                        <HelpIcon /> About
+                      {supportUrl && (
+                        <DropdownItem
+                          key="support"
+                          component="a"
+                          to={supportUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Support{" "}
+                          <Icon isInline iconSize="sm">
+                            <ExternalLinkAltIcon />
+                          </Icon>
+                        </DropdownItem>
+                      )}
+                      <DropdownItem
+                        key="about"
+                        onClick={toggleIsAboutModalOpen}
+                      >
+                        About
                       </DropdownItem>
                     </DropdownList>
                   </Dropdown>

client/src/app/layout/sidebar.tsx

@@ -1,7 +1,14 @@
 import type React from "react";
 import { NavLink } from "react-router-dom";
 
-import { Nav, NavList, PageSidebar } from "@patternfly/react-core";
+import {
+  Icon,
+  Nav,
+  NavItem,
+  NavList,
+  PageSidebar,
+} from "@patternfly/react-core";
+import ExternalLinkAltIcon from "@patternfly/react-icons/dist/esm/icons/external-link-alt-icon";
 import { css } from "@patternfly/react-styles";
 
 import { LayoutTheme } from "./layout-constants";
@@ -94,6 +101,16 @@ export const SidebarApp: React.FC = () => {
               Upload
             </NavLink>
           </li>
+          <NavItem
+            to={`${window.location.origin}/openapi`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            API&nbsp;
+            <Icon isInline>
+              <ExternalLinkAltIcon />
+            </Icon>
+          </NavItem>
         </NavList>
       </Nav>
     );

common/src/branding-strings-stub.json

@@ -16,6 +16,7 @@
       "height": ""
     },
     "leftTitle": null,
-    "rightBrand": null
+    "rightBrand": null,
+    "supportUrl": null
   }
 }

common/src/branding.ts

@@ -27,6 +27,7 @@ export interface BrandingStrings {
     leftBrand?: MastheadBrand;
     leftTitle?: MastheadTitle;
     rightBrand?: MastheadBrand;
+    supportUrl?: string;
   };
 }
 

common/src/proxies.ts

@@ -54,4 +54,14 @@ export const proxyMap: Record<string, Options> = {
       }
     },
   },
+  "/openapi": {
+    target: TRUSTIFICATION_ENV.TRUSTIFY_API_URL || "http://localhost:8080",
+    logLevel: process.env.DEBUG ? "debug" : "info",
+    changeOrigin: true,
+  },
+  "/openapi.json": {
+    target: TRUSTIFICATION_ENV.TRUSTIFY_API_URL || "http://localhost:8080",
+    logLevel: process.env.DEBUG ? "debug" : "info",
+    changeOrigin: true,
+  },
 };