diff --git a/ui/app/[locale]/AppMasthead.tsx b/ui/app/[locale]/AppMasthead.tsx
index 2e0afefc1..6e2cc604a 100644
--- a/ui/app/[locale]/AppMasthead.tsx
+++ b/ui/app/[locale]/AppMasthead.tsx
@@ -18,10 +18,12 @@ 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() {
@@ -29,71 +31,89 @@ export function AppMasthead() {
const { data } = useSession();
const { user } = data || {};
const { toggleSidebar } = useAppLayout();
-
+ const [isFeedbackModalOpen, setIsFeedbackModalOpen] = useState(false);
+ const openFeedbackModal = () => {
+ setIsFeedbackModalOpen(true);
+ };
+ const closeFeedbackModal = () => {
+ setIsFeedbackModalOpen(false);
+ };
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- }
- ouiaId={"setting-button"}
- />
-
-
- }
- ouiaId={"help-button"}
- />
-
+
+
+ }
+ ouiaId={"setting-button"}
+ />
+
+
+ }
+ ouiaId={"help-button"}
+ onClick={openFeedbackModal}
+ />
+
+
-
-
-
-
-
-
+
+
+
+
+
+
+
);
}
diff --git a/ui/package.json b/ui/package.json
index 230e006e6..df5322d20 100644
--- 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
index cbea8754e..ba19a574f 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -26,6 +26,9 @@ dependencies:
'@patternfly/react-tokens':
specifier: ^5.1.2
version: 5.1.2
+ '@patternfly/react-user-feedback':
+ specifier: ^5.0.0
+ version: 5.0.0(react-dom@18.2.0)(react@18.2.0)
'@types/lodash.groupby':
specifier: ^4.6.9
version: 4.6.9
@@ -2178,6 +2181,18 @@ packages:
resolution: {integrity: sha512-hu/6kEEMnyDc4GiMiaEau3kYq0BZoB3X1tZLcNfg9zQZnOydUgaLcUgR8+IlMF/nVVIqNjZF2RA/5lmKAVz2cQ==}
dev: false
+ /@patternfly/react-user-feedback@5.0.0(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-E28AC87z9A2X5blf9ih9YVoHsAo68tDM6fLrOWFU447v3QHmWwBIViHT7/BL+M2B7ZORQ+LtM9M4bn0lq7/Ezw==}
+ peerDependencies:
+ react: ^17 || ^18
+ react-dom: ^17 || ^18
+ dependencies:
+ '@patternfly/react-core': 5.1.2(react-dom@18.2.0)(react@18.2.0)
+ '@patternfly/react-icons': 5.1.2(react-dom@18.2.0)(react@18.2.0)
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
/@pkgjs/parseargs@0.11.0:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
diff --git a/ui/public/pf_feedback.svg b/ui/public/pf_feedback.svg
new file mode 100644
index 000000000..14b80462f
--- /dev/null
+++ b/ui/public/pf_feedback.svg
@@ -0,0 +1,145 @@
+
+
\ No newline at end of file