feat(feedback): add feedback modal

src/components/FeedbackSection/FeedbackModal.scss

@@ -0,0 +1,66 @@
+.feedback-modal {
+  border-radius: 5px;
+  & > .pf-v5-c-modal-box__body {
+    padding: 0;
+    margin: 0;
+  }
+  &__feedback-flex {
+    margin-right: 0px !important;
+  }
+  &__feedback-description {
+    margin-inline-end: 0 !important;
+  }
+  &__image-flex {
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+  }
+  &__feedback-image {
+    width: 100%;
+    height: 100%;
+  }
+  &__panel-content {
+    padding: var(--pf-v5-global--spacer--xl);
+    gap: var(--pf-v5-global--spacer--md);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  &__panel-footer {
+    display: flex;
+    align-self: stretch;
+    flex-wrap: wrap;
+    padding: 0 0 var(--pf-v5-global--spacer--sm) 0 !important;
+    margin-top: auto;
+    box-shadow: none !important;
+    column-gap: var(--pf-v5-global--spacer--xl);
+  }
+  &__panel-header {
+    padding: 0 37px var(--pf-v5-global--spacer--sm) 0 !important;
+  }
+  &__content-main {
+    max-height: 450px !important;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+  }
+  &__cards-list {
+    gap: var(--pf-v5-global--spacer--md);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: inherit !important;
+  }
+  &__section-card {
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+    border-radius: 5px;
+    width: 100%;
+    &:hover {
+      cursor: pointer;
+      border: 1px solid var(--pf-v5-global--link--Color--light);
+    }
+  }
+
+  &__input-field {
+    padding-top: var(--pf-v5-global--spacer--md);
+  }
+}

src/components/FeedbackSection/FeedbackModal.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import {
+  ModalVariant,
+  Flex,
+  FlexItem,
+  Bullseye,
+  Spinner,
+  Button,
+  ButtonType,
+  Panel,
+  PanelFooter,
+} from '@patternfly/react-core';
+import { ErrorBoundary } from '@sentry/react';
+import { Formik, Form } from 'formik';
+import { isEmpty } from 'lodash-es';
+import { ComponentProps, createModalLauncher } from '~/components/modal/createModalLauncher';
+import { useKonfluxPublicInfo } from '~/hooks/useKonfluxPublicInfo';
+import RHsupportLight from '../../assets/rh_feedback.svg';
+import BeginningSection from './components/BeginningSection';
+import { FeedbackSections } from './consts';
+import { BugInfo, FeatureInfo, getBugURL, getFeatureURL } from './feedback-utils';
+import {
+  BugSectionValidationSchema,
+  FeatureSectionValidationSchema,
+  FeedbackSectionValidationSchema,
+} from './FeedbackValidationSchemas';
+
+const BugRFESection = React.lazy(() => import('./components/BugRFESection'));
+const FeedbackSection = React.lazy(() => import('./components/FeedbackSection'));
+
+import './FeedbackModal.scss';
+
+export type FeedbackFormValues = {
+  bug?: BugInfo;
+  feature?: FeatureInfo;
+  feedback?: { description: string; scale: number };
+};
+
+const FeedbackModal: React.FC<React.PropsWithChildren<ComponentProps>> = ({ onClose }) => {
+  const [currentSection, setCurrentSection] = React.useState<FeedbackSections>(
+    FeedbackSections.BeginningSection,
+  );
+
+  const [konfluxInfo] = useKonfluxPublicInfo();
+
+  const handleSubmit = (values: { bug?: BugInfo; feature?: FeatureInfo }) => {
+    if (currentSection === FeedbackSections.BugSection) {
+      const { bug } = values;
+      const url = getBugURL(bug, konfluxInfo);
+      window.open(url, '_blank');
+      onClose(null, { submitClicked: true });
+    }
+
+    if (currentSection === FeedbackSections.FeatureSection) {
+      const { feature } = values;
+      const url = getFeatureURL(feature);
+      window.open(url, '_blank');
+      onClose(null, { submitClicked: true });
+    }
+    if (currentSection === FeedbackSections.FeedbackSection) {
+      // Add Sentry/Segment connection here
+      onClose(null, { submitClicked: true });
+    }
+  };
+
+  return (
+    <Formik
+      initialValues={
+        currentSection === FeedbackSections.BugSection
+          ? {
+              bug: { title: '', description: '', getAdditionalInfo: false },
+            }
+          : currentSection === FeedbackSections.FeatureSection
+            ? {
+                feature: { title: '', description: '' },
+              }
+            : {
+                feedback: {
+                  description: '',
+                  scale: 5,
+                },
+              }
+      }
+      onSubmit={handleSubmit}
+      validationSchema={
+        currentSection === FeedbackSections.BugSection
+          ? BugSectionValidationSchema
+          : currentSection === FeedbackSections.FeatureSection
+            ? FeatureSectionValidationSchema
+            : FeedbackSectionValidationSchema
+      }
+    >
+      {({ isSubmitting, errors, touched }) => {
+        return (
+          <Form>
+            <Flex
+              className="feedback-modal__feedback-flex"
+              direction={{ default: 'row' }}
+              alignItems={{ default: 'alignItemsStretch' }}
+            >
+              <FlexItem
+                className="feedback-modal__feedback-description"
+                flex={{ default: 'flex_2' }}
+              >
+                <Panel isScrollable className="feedback-modal__panel-content">
+                  <ErrorBoundary>
+                    <React.Suspense
+                      fallback={
+                        <Bullseye>
+                          <Spinner size="xl" />
+                        </Bullseye>
+                      }
+                    >
+                      {currentSection === FeedbackSections.BeginningSection && (
+                        <BeginningSection setCurrentSection={setCurrentSection} />
+                      )}
+                      {currentSection === FeedbackSections.FeedbackSection && <FeedbackSection />}
+                      {currentSection === FeedbackSections.BugSection && (
+                        <BugRFESection currentSection={FeedbackSections.BugSection} />
+                      )}
+                      {currentSection === FeedbackSections.FeatureSection && (
+                        <BugRFESection currentSection={FeedbackSections.FeatureSection} />
+                      )}
+                    </React.Suspense>
+                  </ErrorBoundary>
+
+                  <PanelFooter className="feedback-modal__panel-footer">
+                    {(currentSection === FeedbackSections.BugSection ||
+                      currentSection === FeedbackSections.FeatureSection) && (
+                      <Button
+                        variant="primary"
+                        type={ButtonType.submit}
+                        isDisabled={isEmpty(touched) || !isEmpty(errors) || isSubmitting}
+                      >
+                        Preview on Github
+                      </Button>
+                    )}
+                    {currentSection === FeedbackSections.FeedbackSection && (
+                      <Button
+                        variant="primary"
+                        type={ButtonType.submit}
+                        isDisabled={isEmpty(touched) || !isEmpty(errors) || isSubmitting}
+                      >
+                        Submit feedback
+                      </Button>
+                    )}
+                    {currentSection !== FeedbackSections.BeginningSection && (
+                      <Button
+                        variant="secondary"
+                        onClick={() => setCurrentSection(FeedbackSections.BeginningSection)}
+                      >
+                        Back
+                      </Button>
+                    )}
+                    <Button variant="link" onClick={() => onClose(null, { submitClicked: false })}>
+                      Cancel
+                    </Button>
+                  </PanelFooter>
+                </Panel>
+              </FlexItem>
+
+              <FlexItem className="feedback-modal__image-flex" flex={{ default: 'flex_1' }}>
+                <RHsupportLight className="feedback-modal__feedback-image" />
+              </FlexItem>
+            </Flex>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export const createFeedbackModal = createModalLauncher(FeedbackModal, {
+  'data-test': 'feedback-modal',
+  variant: ModalVariant.large,
+  className: 'feedback-modal',
+});
+
+export default FeedbackModal;

src/components/FeedbackSection/FeedbackValidationSchemas.ts

@@ -0,0 +1,31 @@
+import * as yup from 'yup';
+
+export const BugSectionValidationSchema = yup.object({
+  bug: yup.object({
+    title: yup.string().required('Required').max(400, 'Should be less than 400 characters.'),
+    description: yup
+      .string()
+      .required('Required')
+      .max(2000, 'Should be less than 2000 characters.'),
+  }),
+});
+
+export const FeatureSectionValidationSchema = yup.object({
+  feature: yup.object({
+    title: yup.string().required('Required').max(400, 'Should be less than 400 characters.'),
+    description: yup
+      .string()
+      .required('Required')
+      .max(2000, 'Should be less than 2000 characters.'),
+  }),
+});
+
+export const FeedbackSectionValidationSchema = yup.object({
+  feedback: yup.object({
+    scale: yup.number().required('Required'),
+    description: yup
+      .string()
+      .required('Required')
+      .max(2000, 'Should be less than 2000 characters.'),
+  }),
+});

src/components/FeedbackSection/__tests__/BeginningSection.spec.tsx

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import BeginningSection from '../components/BeginningSection';
+
+const setCurrentSectionMock = jest.fn();
+
+describe('BeginningSection', () => {
+  it('should initialize with BeginingSection', () => {
+    const screen = render(<BeginningSection setCurrentSection={setCurrentSectionMock} />);
+    screen.getByText('Share feedback');
+    screen.getByText('Report a bug');
+    screen.getByText('Request a new feature');
+  });
+});

src/components/FeedbackSection/__tests__/BugRFESection.spec.tsx

@@ -0,0 +1,25 @@
+import BugRFESection from '../components/BugRFESection';
+import { FeedbackSections } from '../consts';
+import { formikRenderer } from '~/unit-test-utils';
+
+describe('BugRFESection', () => {
+  it('should show BugForm when current Section is BugSection', () => {
+    const screen = formikRenderer(<BugRFESection currentSection={FeedbackSections.BugSection} />);
+    screen.getByText('Report a bug');
+    screen.getByText(
+      'Describe the bug you encountered. For urgent issues, use #konflux-user-forum instead',
+    );
+    screen.getByText('Title');
+    screen.getByText('Please provide detailed description of the bug');
+  });
+
+  it('should show RFEForm when current Section is FeatureSection', () => {
+    const screen = formikRenderer(
+      <BugRFESection currentSection={FeedbackSections.FeatureSection} />,
+    );
+    screen.getByText('Request a new feature');
+    screen.getByText(/Please provide detailed description of the feature/);
+    screen.getByText('Title');
+    screen.getByText(/Please provide detailed description of the bug/);
+  });
+});

src/components/FeedbackSection/__tests__/FeedbackModal.spec.tsx

@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import FeedbackModal from '../FeedbackModal';
+
+jest.mock('~/hooks/useKonfluxPublicInfo', () => ({
+  useKonfluxPublicInfo: jest.fn(() => [{ visibility: 'private' }]),
+}));
+
+describe('FeedbackModal', () => {
+  it('should initialize with BeginingSection Cards', () => {
+    const screen = render(<FeedbackModal />);
+    screen.getByText('Share feedback');
+    screen.getByText('Report a bug');
+    screen.getByText('Request a new feature');
+  });
+  it('should have a Cancel button', () => {
+    const screen = render(<FeedbackModal />);
+    expect(screen.getByRole('button', { name: /Cancel/i })).toBeInTheDocument();
+  });
+});