Add the @patternfly/react-user-feedback modal and link it to the help…

… icon in the masthead (#356) * Add the @patternfly/react-user-feedback modal and link it to the help icon in the masthead * Update support case url
streamshub · Jan 10, 2024 · 6dcac58 · 6dcac58
1 parent 17ac4a9
commit 6dcac58
Show file tree

Hide file tree

Showing 4 changed files with 242 additions and 61 deletions.
diff --git a/ui/app/[locale]/AppMasthead.tsx b/ui/app/[locale]/AppMasthead.tsx
@@ -18,82 +18,102 @@ import {
   QuestionCircleIcon,
 } from "@/libs/patternfly/react-icons";
 import logo from "@/public/Logo-Red_Hat-AMQ-A-Reverse-RGB.svg";
+import { FeedbackModal } from "@patternfly/react-user-feedback";
 import { useSession } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
+import { useState } from "react";
 import { UserDropdown } from "./UserDropdown";
 
 export function AppMasthead() {
   const t = useTranslations();
   const { data } = useSession();
   const { user } = data || {};
   const { toggleSidebar } = useAppLayout();
-
+  const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false);
+  const openFeedbackModal = () => {
+    setIsFeedbackModalOpen(true);
+  };
+  const closeFeedbackModal = () => {
+    setIsFeedbackModalOpen(false);
+  };
   return (
-    <Masthead>
-      <MastheadToggle>
-        <PageToggleButton
-          variant="plain"
-          aria-label="Global navigation"
-          onClick={toggleSidebar}
-        >
-          <BarsIcon />
-        </PageToggleButton>
-      </MastheadToggle>
-      <MastheadMain>
-        <Link href={"/"} className={"pf-v5-c-masthead_brand"}>
-          <Image
-            className={"pf-v5-c-brand"}
-            src={logo}
-            alt={t("common.title")}
-            priority={true}
-            style={{ height: 48 }}
-          />
-        </Link>
-      </MastheadMain>
-      <MastheadContent>
-        <Toolbar
-          ouiaId="masthead-toolbar"
-          id={"masthead-toolbar"}
-          isFullHeight
-          isStatic
-        >
-          <ToolbarContent id={"masthead-toolbar"}>
-            <ToolbarGroup
-              variant="icon-button-group"
-              align={{ default: "alignRight" }}
-              spacer={{ default: "spacerNone", md: "spacerMd" }}
-            >
+    <>
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            onClick={toggleSidebar}
+          >
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <Link href={"/"} className={"pf-v5-c-masthead_brand"}>
+            <Image
+              className={"pf-v5-c-brand"}
+              src={logo}
+              alt={t("common.title")}
+              priority={true}
+              style={{ height: 48 }}
+            />
+          </Link>
+        </MastheadMain>
+        <MastheadContent>
+          <Toolbar
+            ouiaId="masthead-toolbar"
+            id={"masthead-toolbar"}
+            isFullHeight
+            isStatic
+          >
+            <ToolbarContent id={"masthead-toolbar"}>
               <ToolbarGroup
                 variant="icon-button-group"
-                visibility={{ default: "hidden", lg: "visible" }}
+                align={{ default: "alignRight" }}
+                spacer={{ default: "spacerNone", md: "spacerMd" }}
               >
-                <ToolbarItem>
-                  <Button
-                    aria-label="Settings"
-                    variant={"plain"}
-                    icon={<CogIcon />}
-                    ouiaId={"setting-button"}
-                  />
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Button
-                    aria-label="Help"
-                    variant={"plain"}
-                    icon={<QuestionCircleIcon />}
-                    ouiaId={"help-button"}
-                  />
-                </ToolbarItem>
+                <ToolbarGroup
+                  variant="icon-button-group"
+                  visibility={{ default: "hidden", lg: "visible" }}
+                >
+                  <ToolbarItem>
+                    <Button
+                      aria-label="Settings"
+                      variant={"plain"}
+                      icon={<CogIcon />}
+                      ouiaId={"setting-button"}
+                    />
+                  </ToolbarItem>
+                  <ToolbarItem>
+                    <Button
+                      aria-label="Help"
+                      variant={"plain"}
+                      icon={<QuestionCircleIcon />}
+                      ouiaId={"help-button"}
+                      onClick={openFeedbackModal}
+                    />
+                  </ToolbarItem>
+                </ToolbarGroup>
               </ToolbarGroup>
-            </ToolbarGroup>
-            <UserDropdown
-              username={user?.name || user?.email}
-              picture={user?.picture}
-            />
-          </ToolbarContent>
-        </Toolbar>
-      </MastheadContent>
-    </Masthead>
+              <UserDropdown
+                username={user?.name || user?.email}
+                picture={user?.picture}
+              />
+            </ToolbarContent>
+          </Toolbar>
+        </MastheadContent>
+      </Masthead>
+      <FeedbackModal
+        onShareFeedback="https://github.com/eyefloaters/console/issues/new?assignees=&labels=&projects=&template=share-feeedback.md&title="
+        onJoinMailingList="https://github.com/eyefloaters/console/issues/new?assignees=&labels=&projects=&template=inform-the-direction-of-products.md&title="
+        onOpenSupportCase="https://access.redhat.com/support/cases/#/case/new/get-support?caseCreate=true"
+        onReportABug="https://github.com/eyefloaters/console/issues/new?assignees=&labels=&projects=&template=bug_report.md&title="
+        feedbackImg={"/pf_feedback.svg"}
+        isOpen={isFeedbackModalOpen}
+        onClose={closeFeedbackModal}
+      />
+    </>
   );
 }
diff --git a/ui/package.json b/ui/package.json
@@ -18,6 +18,7 @@
     "@patternfly/react-icons": "^5.1.2",
     "@patternfly/react-table": "^5.1.2",
     "@patternfly/react-tokens": "^5.1.2",
+    "@patternfly/react-user-feedback": "^5.0.0",
     "@types/lodash.groupby": "^4.6.9",
     "@types/node": "20.10.7",
     "@types/react": "18.2.47",

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml