openshift · openshift-cherrypick-robot · Mar 8, 2023
diff --git a/dynamic-demo-plugin/yarn.lock b/dynamic-demo-plugin/yarn.lock
@@ -89,8 +89,8 @@
   version "0.0.0-fixed"
   dependencies:
     "@patternfly/quickstarts" "2.3.1"
-    "@patternfly/react-core" "4.276.5"
-    "@patternfly/react-table" "4.112.38"
+    "@patternfly/react-core" "4.276.6"
+    "@patternfly/react-table" "4.112.39"
     classnames "2.x"
     immutable "3.x"
     lodash "^4.17.21"
@@ -152,10 +152,10 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
-"@patternfly/react-core@4.276.5", "@patternfly/react-core@^4.276.5":
-  version "4.276.5"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.5.tgz#2f0e61bdaef38d6ba0ffef8d7805c373ff01f4b2"
-  integrity sha512-roSywj/Kwpoi1UcJrto4QS8QChNC0RSjHEQNMD6+RCX5JZ+LmEd8Qq3Vgm6j5Twse5TsC6DtZmRQCogKBhkAlQ==
+"@patternfly/react-core@4.276.6", "@patternfly/react-core@^4.276.6":
+  version "4.276.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.6.tgz#fa39aa61022f70bf350b2efc660bdeb096bda447"
+  integrity sha512-G0K+378jf9jw9g+hCAoKnsAe/UGTRspqPeuAYypF2FgNr+dC7dUpc7/VkNhZBVqSJzUWVEK8NyXcqkfi0IemIg==
   dependencies:
     "@patternfly/react-icons" "^4.93.6"
     "@patternfly/react-styles" "^4.92.6"
@@ -220,12 +220,12 @@
     lodash "^4.17.19"
     tslib "^2.0.0"
 
-"@patternfly/react-table@4.112.38":
-  version "4.112.38"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.112.38.tgz#adb229a94d713fb216a6cacc872da6f278db2594"
-  integrity sha512-IR399yjUxo8pv8c9/xtWZ4R05fSfNC2QO80wCIQ+P2omtGTqL3MxMeYSVgDThJQ0aBl6rHMeIYB9jDDQ//B3hg==
+"@patternfly/react-table@4.112.39":
+  version "4.112.39"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-4.112.39.tgz#bf5b70b7aef4aa3c0d48aa8e6607b830dcdaee47"
+  integrity sha512-U+hOMgYlbghGH4M5MX+qt0GkVi/ocrGnxDnm11YiS3CtEGsd6Rr0NeqMmk0uoR46Od4Pr5tKuXxZhPP32sCL/w==
   dependencies:
-    "@patternfly/react-core" "^4.276.5"
+    "@patternfly/react-core" "^4.276.6"
     "@patternfly/react-icons" "^4.93.6"
     "@patternfly/react-styles" "^4.92.6"
     "@patternfly/react-tokens" "^4.94.6"

diff --git a/frontend/package.json b/frontend/package.json
@@ -151,6 +151,7 @@
     "@patternfly/react-tokens": "4.94.6",
     "@patternfly/react-topology": "4.91.27",
     "@patternfly/react-virtualized-extension": "4.88.113",
+    "@patternfly/react-user-feedback": "1.0.2",
     "@prometheus-io/codemirror-promql": "^0.37.0",
     "@rjsf/core": "^2.5.1",
     "abort-controller": "3.0.0",

diff --git a/frontend/public/components/feedback-local.jsx b/frontend/public/components/feedback-local.jsx
@@ -0,0 +1,62 @@
+import { useTranslation } from 'react-i18next';
+
+export function useFeedbackLocal(reportBug) {
+  const { t } = useTranslation();
+
+  return {
+    getSupport: reportBug.description,
+    back: t('public~Back'),
+    bugReported: t('public~Bug Reported'),
+    cancel: t('public~Cancel'),
+    close: t('public~Close'),
+    describeBug: t(
+      'public~Describe the bug you encountered. For urgent issues, open a support case instead.',
+    ),
+    describeBugUrgentCases: t(
+      'public~Describe the bug you encountered. For urgent issues, open a support case instead.',
+    ),
+    describeReportBug: t(
+      'public~Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,',
+    ),
+    directInfluence:
+      'public~your feedback will directly influence the future of Red Hat’s products. Opt in below to hear about future research opportunities via email.',
+    email: t('public~Email'),
+    enterFeedback: t('public~Enter your feedback'),
+    feedback: t('public~Feedback'),
+    feedbackSent: t('public~Feedback Sent'),
+    helpUsImproveHCC: t('public~Help us improve the Red Hat OpenShift.'),
+    howIsConsoleExperience: t('public~What has your experience been like so far?'),
+    joinMailingList: t('public~Join mailing list'),
+    informDirectionDescription: t(
+      'public~By participating in feedback sessions, usability tests, and interviews with our',
+    ),
+    informRedhatDirection: t('public~Inform the direction of Red Hat'),
+    learnAboutResearchOpportunities: t(
+      'public~Learn about opportunities to share your feedback with our User Research Team.',
+    ),
+    openSupportCase: reportBug.label,
+    problemProcessingRequest: t(
+      'public~There was a problem processing the request. Try reloading the page. If the problem persists, contact',
+    ),
+    redHatSupport: t('public~Red Hat support'),
+    reportABug: t('public~Report a bug'),
+    responseSent: t('public~Response sent'),
+    researchOpportunities: t('public~Yes, I would like to hear about research opportunities'),
+    shareFeedback: t('public~Share feedback'),
+    shareYourFeedback: t('public~Share your feedback with us!'),
+    somethingWentWrong: t('public~Something went wrong'),
+    submitFeedback: t('"Submit feedback'),
+    teamWillReviewBug: t(
+      'public~We appreciate your feedback and our team will review your report shortly',
+    ),
+    tellAboutExperience: t('public~Tell us about your experience'),
+    thankYouForFeedback: t('public~Thank you, we appreciate your feedback.'),
+    thankYouForInterest: t(
+      'public~Thank you for your interest in user research. You have been added to our mailing list.',
+    ),
+    userResearchTeam: t('public~User Research Team'),
+    weNeverSharePersonalInformation: t(
+      'public~We never share your personal information, and you can opt out at any time.',
+    ),
+  };
+}
diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
@@ -47,6 +47,8 @@ import { ConsoleLinkModel } from '../models';
 import { withTelemetry, withQuickStartContext, withRequestTokenURL } from '@console/shared/src/hoc';
 import ClusterMenu from '@console/app/src/components/nav/ClusterMenu';
 import { ACM_PERSPECTIVE_ID } from '@console/app/src/consts';
+import { FeedbackModal } from '@patternfly/react-user-feedback';
+import { useFeedbackLocal } from './feedback-local';
 
 const defaultHelpLinks = [
   {
@@ -75,6 +77,20 @@ const MultiClusterToolbarGroup = () => {
   );
 };
 
+const FeedbackModalLocalized = ({ isOpen, onClose, reportBugLink }) => {
+  const feedbackLocales = useFeedbackLocal(reportBugLink);
+  return (
+    <FeedbackModal
+      onShareFeedback="https://console.redhat.com/self-managed-feedback-form?source=openshift"
+      onOpenSupportCase={reportBugLink.href}
+      feedbackLocale={feedbackLocales}
+      onJoinMailingList="https://console.redhat.com/self-managed-research-form?source=openshift"
+      isOpen={isOpen}
+      onClose={onClose}
+    />
+  );
+};
+
 const SystemStatusButton = ({ statuspageData }) => {
   const { t } = useTranslation();
   return !_.isEmpty(_.get(statuspageData, 'incidents')) ? (
@@ -101,6 +117,8 @@ class MastheadToolbarContents_ extends React.Component {
       username: null,
       isKubeAdmin: false,
       showAboutModal: false,
+      isFeedbackModalOpen: false,
+      reportBugLink: null,
     };
 
     this._getStatuspageData = this._getStatuspageData.bind(this);
@@ -120,6 +138,7 @@ class MastheadToolbarContents_ extends React.Component {
     this._onHelpDropdownSelect = this._onHelpDropdownSelect.bind(this);
     this._onHelpDropdownToggle = this._onHelpDropdownToggle.bind(this);
     this._onAboutModal = this._onAboutModal.bind(this);
+    this._onFeedbackModal = this._onFeedbackModal.bind(this);
     this._closeAboutModal = this._closeAboutModal.bind(this);
     this._resetInactivityTimeout = this._resetInactivityTimeout.bind(this);
     this.userInactivityTimeout = null;
@@ -240,6 +259,9 @@ class MastheadToolbarContents_ extends React.Component {
     });
   }
 
+  _onFeedbackModal(bugLink) {
+    this.setState({ isFeedbackModalOpen: true, reportBugLink: bugLink });
+  }
   _onAboutModal(e) {
     e.preventDefault();
     this.setState({ showAboutModal: true });
@@ -411,9 +433,12 @@ class MastheadToolbarContents_ extends React.Component {
         ...(reportBugLink
           ? [
               {
-                label: reportBugLink.label,
-                externalLink: true,
-                href: reportBugLink.href,
+                label: t('public~Share Feedback'),
+                component: 'button',
+                callback: (e) => {
+                  e.preventDefault();
+                  this._onFeedbackModal(reportBugLink);
+                },
               },
             ]
           : []),
@@ -748,6 +773,13 @@ class MastheadToolbarContents_ extends React.Component {
           </ToolbarContent>
         </Toolbar>
         <AboutModal isOpen={showAboutModal} closeAboutModal={this._closeAboutModal} />
+        {this.state.reportBugLink ? (
+          <FeedbackModalLocalized
+            reportBugLink={this.state.reportBugLink}
+            isOpen={this.state.isFeedbackModalOpen}
+            onClose={() => this.setState({ isFeedbackModalOpen: false })}
+          />
+        ) : null}
       </>
     );
   }

diff --git a/frontend/public/locales/en/public.json b/frontend/public/locales/en/public.json
@@ -544,6 +544,34 @@
   "by name": "by name",
   "Modal": "Modal",
   "Reset": "Reset",
+  "Back": "Back",
+  "Bug Reported": "Bug Reported",
+  "Close": "Close",
+  "Describe the bug you encountered. For urgent issues, open a support case instead.": "Describe the bug you encountered. For urgent issues, open a support case instead.",
+  "Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,": "Describe the bug you encountered. Include where it is located and what action caused it. If this issue is urgent or blocking your workflow,",
+  "Enter your feedback": "Enter your feedback",
+  "Feedback": "Feedback",
+  "Feedback Sent": "Feedback Sent",
+  "Help us improve the Red Hat OpenShift.": "Help us improve the Red Hat OpenShift.",
+  "What has your experience been like so far?": "What has your experience been like so far?",
+  "Join mailing list": "Join mailing list",
+  "By participating in feedback sessions, usability tests, and interviews with our": "By participating in feedback sessions, usability tests, and interviews with our",
+  "Inform the direction of Red Hat": "Inform the direction of Red Hat",
+  "Learn about opportunities to share your feedback with our User Research Team.": "Learn about opportunities to share your feedback with our User Research Team.",
+  "There was a problem processing the request. Try reloading the page. If the problem persists, contact": "There was a problem processing the request. Try reloading the page. If the problem persists, contact",
+  "Red Hat support": "Red Hat support",
+  "Report a bug": "Report a bug",
+  "Response sent": "Response sent",
+  "Yes, I would like to hear about research opportunities": "Yes, I would like to hear about research opportunities",
+  "Share feedback": "Share feedback",
+  "Share your feedback with us!": "Share your feedback with us!",
+  "\"Submit feedback": "\"Submit feedback",
+  "We appreciate your feedback and our team will review your report shortly": "We appreciate your feedback and our team will review your report shortly",
+  "Tell us about your experience": "Tell us about your experience",
+  "Thank you, we appreciate your feedback.": "Thank you, we appreciate your feedback.",
+  "Thank you for your interest in user research. You have been added to our mailing list.": "Thank you for your interest in user research. You have been added to our mailing list.",
+  "User Research Team": "User Research Team",
+  "We never share your personal information, and you can opt out at any time.": "We never share your personal information, and you can opt out at any time.",
   "Label": "Label",
   "Clear all filters": "Clear all filters",
   "Filter": "Filter",
@@ -740,6 +768,7 @@
   "Documentation": "Documentation",
   "ACM Documentation": "ACM Documentation",
   "Command line tools": "Command line tools",
+  "Share Feedback": "Share Feedback",
   "About": "About",
   "User Preferences": "User Preferences",
   "Log out": "Log out",
@@ -768,7 +797,6 @@
   "e.g., {{version}}": "e.g., {{version}}",
   "Potential channels are {{stable}}, {{fast}}, or {{candidate}}.": "Potential channels are {{stable}}, {{fast}}, or {{candidate}}.",
   "Other available paths": "Other available paths",
-  "Close": "Close",
   "Version {{desiredVersion}} not found among the supported updates. Select another version.": "Version {{desiredVersion}} not found among the supported updates. Select another version.",
   "Recommended": "Recommended",
   "Supported but not recommended": "Supported but not recommended",
@@ -1895,8 +1923,9 @@
   "VolumeSnapshotContents": "VolumeSnapshotContents",
   "ConsolePlugin": "ConsolePlugin",
   "ConsolePlugins": "ConsolePlugins",
-  "Open support case with Red Hat": "Open support case with Red Hat",
-  "Report bug to Red Hat": "Report bug to Red Hat",
+  "Open a support case": "Open a support case",
+  "Get help from Red Hat support.": "Get help from Red Hat support.",
+  "Report a bug to Red Hat": "Report a bug to Red Hat",
   "Always pull": "Always pull",
   "Pull down a new copy of the container image whenever a new pod is created.": "Pull down a new copy of the container image whenever a new pod is created.",
   "Pull if needed": "Pull if needed",

diff --git a/frontend/public/module/k8s/cluster-settings.ts b/frontend/public/module/k8s/cluster-settings.ts
@@ -248,7 +248,9 @@ export const getCurrentVersion = (cv: ClusterVersionKind): string => {
   return _.get(cv, 'status.history[0].version') || _.get(cv, 'spec.desiredUpdate.version');
 };
 
-export const getReportBugLink = (cv: ClusterVersionKind): { label: string; href: string } => {
+export const getReportBugLink = (
+  cv: ClusterVersionKind,
+): { label: string; description: string; href: string } => {
   const version: string = getCurrentVersion(cv);
   const parsed = semver.parse(version);
   if (!parsed) {
@@ -283,13 +285,15 @@ export const getReportBugLink = (cv: ClusterVersionKind): { label: string; href:
   // Show a support case link for supported versions and a Jira link for prerelease versions.
   return _.isEmpty(prerelease)
     ? {
-        label: i18next.t('public~Open support case with Red Hat'),
+        label: i18next.t('public~Open a support case'),
+        description: i18next.t('public~Get help from Red Hat support.'),
         href: `https://access.redhat.com/support/cases/#/case/new?product=${encodeURIComponent(
           productName,
         )}&version=${major}.${minor}&clusterId=${cv.spec.clusterID}`,
       }
     : {
-        label: i18next.t('public~Report bug to Red Hat'),
+        label: i18next.t('public~Report a bug'),
+        description: i18next.t('public~Report a bug to Red Hat'),
         // It is not currently possible to pre-populate `component`, etc. per https://jira.atlassian.com/browse/JRASERVER-23590
         href: `https://issues.redhat.com/secure/CreateIssue.jspa?pid=12332330&issuetype=1`,
       };

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2081,6 +2081,11 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
+"@patternfly/react-icons@4.93.6", "@patternfly/react-icons@^4.93.4", "@patternfly/react-icons@^4.93.6":
+  version "4.93.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.6.tgz#4aff18724afa30157e3ffd6a6414951dbb39dcb3"
+  integrity sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==
+
 "@patternfly/react-icons@^4.11.4":
   version "4.11.4"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.11.4.tgz#8fae0bf215e39e382661a089a1d43f3ccb7fdeef"
@@ -2096,11 +2101,6 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.3.tgz#ba617b1daefce81ba903bc702ff66060413e2a9f"
   integrity sha512-OIEeTc4Noi9XOIRF3OB3sz9dRnxr1h4eNIzIeZwRd8xXWCQxYcrllxPV98F3+RpL4ZCH2QWb/2gG4mHrVyX+0A==
 
-"@patternfly/react-icons@^4.93.4", "@patternfly/react-icons@^4.93.6":
-  version "4.93.6"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.6.tgz#4aff18724afa30157e3ffd6a6414951dbb39dcb3"
-  integrity sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==
-
 "@patternfly/react-log-viewer@4.87.100":
   version "4.87.100"
   resolved "https://registry.yarnpkg.com/@patternfly/react-log-viewer/-/react-log-viewer-4.87.100.tgz#7cc81c886ad805fb7bce3640f69aaeeb31bcbb25"
@@ -2189,6 +2189,14 @@
     tslib "^2.0.0"
     webcola "3.4.0"
 
+"@patternfly/react-user-feedback@1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-user-feedback/-/react-user-feedback-1.0.2.tgz#9e5033a1974e7d4038cd0b82ce4c4f3c6607d2f1"
+  integrity sha512-2WJAhCqgWQDbBsYzs2ajIgneMLTQyzJHAvHxm6WS3beTHUKAz7qKMSQsbPG+lgjwaLd+A1lsGeJKrkT3nTdjeA==
+  dependencies:
+    "@patternfly/react-core" "^4.276.6"
+    "@patternfly/react-icons" "4.93.6"
+
 "@patternfly/react-virtualized-extension@4.88.113":
   version "4.88.113"
   resolved "https://registry.yarnpkg.com/@patternfly/react-virtualized-extension/-/react-virtualized-extension-4.88.113.tgz#970176193bbed10262f48ccf04a8419716d8c272"