feat: add a feature request feedback form (podman-desktop#9955)

* feat: add a feature request feedback form
Signed-off-by: Sonia Sandler <[email protected]>

packages/renderer/src/lib/feedback/SendFeedback.spec.ts

@@ -62,5 +62,19 @@ test('Expect GitHubIssue feedback form to be rendered if category is not develop
   expect(bugCategory).toBeInTheDocument();
   await fireEvent.click(bugCategory);
   // click on a smiley
-  expect(vi.mocked(GitHubIssueFeedback)).toBeCalled();
+  expect(vi.mocked(GitHubIssueFeedback)).toHaveBeenNthCalledWith(1, expect.anything(), {
+    onCloseForm: expect.any(Function),
+    category: 'bug',
+  });
+
+  categorySelect.focus();
+
+  // select the Feature request category
+  await userEvent.keyboard('[ArrowDown]');
+  const featureCategory = screen.getByRole('button', { name: /Feature/ });
+  await fireEvent.click(featureCategory);
+  expect(vi.mocked(GitHubIssueFeedback)).toHaveBeenNthCalledWith(2, expect.anything(), {
+    onCloseForm: expect.any(Function),
+    category: 'feature',
+  });
 });

packages/renderer/src/lib/feedback/SendFeedback.svelte

@@ -45,8 +45,10 @@ function hideModal(): void {
 
     {#if category === 'developers'}
       <DevelopersFeedback onCloseForm={hideModal}/>
-    {:else}
-      <GitHubIssueFeedback onCloseForm={hideModal}/>
+    {:else if category === 'bug'}
+      <GitHubIssueFeedback onCloseForm={hideModal} category="bug"/>
+    {:else if category === 'feature'}
+      <GitHubIssueFeedback onCloseForm={hideModal} category="feature"/>
     {/if}
   </Modal>
 {/if}

packages/renderer/src/lib/feedback/feedbackForms/GitHubIssueFeedback.spec.ts

@@ -35,15 +35,15 @@ beforeEach(() => {
   vi.resetAllMocks();
 });
 
-test('Expect feedback form to to be bug feedback form', async () => {
-  render(GitHubIssueFeedback, {});
+test('Expect feedback form to to be GitHub issue feedback form', async () => {
+  render(GitHubIssueFeedback, { category: 'bug' });
 
   expect(screen.getByText('Title')).toBeInTheDocument();
   expect(screen.getByText('Description')).toBeInTheDocument();
 });
 
 test('Expect Preview on GitHub button to be disabled if there is no title or description', async () => {
-  render(GitHubIssueFeedback, {});
+  render(GitHubIssueFeedback, { category: 'bug' });
 
   expect(screen.getByRole('button', { name: 'Preview on GitHub' })).toBeDisabled();
 
@@ -58,3 +58,47 @@ test('Expect Preview on GitHub button to be disabled if there is no title or des
   await tick();
   expect(screen.getByRole('button', { name: 'Preview on GitHub' })).toBeEnabled();
 });
+
+test('Expect to have different placeholders for bug vs feaure', async () => {
+  const renderObject = render(GitHubIssueFeedback, { category: 'bug' });
+  let issueTitle = screen.getByTestId('issueTitle');
+  expect(issueTitle).toBeInTheDocument();
+  expect(issueTitle).toHaveProperty('placeholder', 'Bug Report Title');
+
+  let issueDescription = screen.getByTestId('issueDescription');
+  expect(issueDescription).toBeInTheDocument();
+  expect(issueDescription).toHaveProperty('placeholder', 'Bug description');
+
+  renderObject.unmount();
+
+  render(GitHubIssueFeedback, { category: 'feature' });
+
+  issueTitle = screen.getByTestId('issueTitle');
+  expect(issueTitle).toBeInTheDocument();
+  expect(issueTitle).toHaveProperty('placeholder', 'Feature name');
+
+  issueDescription = screen.getByTestId('issueDescription');
+  expect(issueDescription).toBeInTheDocument();
+  expect(issueDescription).toHaveProperty('placeholder', 'Feature description');
+});
+
+test('Expect to have different existing GitHub issues links for bug and feature categories', async () => {
+  const renderObject = render(GitHubIssueFeedback, { category: 'bug' });
+  let existingIssues = screen.getByLabelText('GitHub issues');
+  expect(existingIssues).toBeInTheDocument();
+
+  await userEvent.click(existingIssues);
+  expect(window.openExternal).toHaveBeenCalledWith(
+    'https://github.com/podman-desktop/podman-desktop/issues?q=label%3A%22kind%2Fbug%20%F0%9F%90%9E%22',
+  );
+  renderObject.unmount();
+
+  render(GitHubIssueFeedback, { category: 'feature' });
+  existingIssues = screen.getByLabelText('GitHub issues');
+  expect(existingIssues).toBeInTheDocument();
+
+  await userEvent.click(existingIssues);
+  expect(window.openExternal).toHaveBeenCalledWith(
+    'https://github.com/podman-desktop/podman-desktop/issues?q=label%3A%22kind%2Ffeature%20%F0%9F%92%A1%22',
+  );
+});

packages/renderer/src/lib/feedback/feedbackForms/GitHubIssueFeedback.svelte

@@ -2,36 +2,46 @@
 import { Button, ErrorMessage, Link } from '@podman-desktop/ui-svelte';
 
 import FeedbackForm from '/@/lib/feedback/FeedbackForm.svelte';
+import type { FeedbackCategory } from '/@api/feedback';
 
+export let category: FeedbackCategory = 'bug';
 let issueTitle = '';
 let issueDescription = '';
 let issueValidaionError = '';
 
+let titlePlaceholder = category === 'bug' ? 'Bug Report Title' : 'Feature name';
+let descriptionPlaceholder = category === 'bug' ? 'Bug description' : 'Feature description';
+
+let existingIssuesLink =
+  category === 'bug'
+    ? 'https://github.com/podman-desktop/podman-desktop/issues?q=label%3A%22kind%2Fbug%20%F0%9F%90%9E%22'
+    : 'https://github.com/podman-desktop/podman-desktop/issues?q=label%3A%22kind%2Ffeature%20%F0%9F%92%A1%22';
+
 $: if (!issueTitle) {
   if (!issueDescription) {
-    issueValidaionError = 'Please enter bug title and description';
+    issueValidaionError = `Please enter ${category} ${category === 'bug' ? 'title' : 'name'} and description`;
   } else {
-    issueValidaionError = 'Please enter bug title';
+    issueValidaionError = `Please enter ${category} ${category === 'bug' ? 'title' : 'name'}`;
   }
 } else {
   if (!issueDescription) {
-    issueValidaionError = 'Please enter bug description';
+    issueValidaionError = `Please enter ${category} description`;
   }
 }
 
 export let onCloseForm = () => {};
 
 async function openGitHubIssues(): Promise<void> {
   onCloseForm();
-  await window.openExternal('https://github.com/podman-desktop/podman-desktop/issues');
+  await window.openExternal(existingIssuesLink);
 }
 </script>
 
 <FeedbackForm>
   <svelte:fragment slot="content">
-    <div class="text-sm text-[var(--pd-state-warning)]">You can search existing issues on <Link aria-label="GitHub issues" onclick={openGitHubIssues}>github.com/podman-desktop/podman-desktop/issues</Link></div>
+    <div class="text-sm text-[var(--pd-state-warning)]">You can search existing {category} issues on <Link aria-label="GitHub issues" onclick={openGitHubIssues}>github.com/podman-desktop/podman-desktop/issues</Link></div>
     <label for="issueTitle" class="block mt-4 mb-2 text-sm font-medium text-[var(--pd-modal-text)]">Title</label>
-    <input type="text" name="issueTitle" id="issueTitle" bind:value={issueTitle} data-testid="issueTitle" placeholder="Bug Report Title" class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"/>
+    <input type="text" name="issueTitle" id="issueTitle" bind:value={issueTitle} data-testid="issueTitle" placeholder={titlePlaceholder} class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"/>
     <label for="issueDescription" class="block mt-4 mb-2 text-sm font-medium text-[var(--pd-modal-text)]"
       >Description</label>
     <textarea
@@ -42,7 +52,7 @@ async function openGitHubIssues(): Promise<void> {
       data-testid="issueDescription"
       bind:value={issueDescription}
       class="w-full p-2 outline-none text-sm bg-[var(--pd-input-field-focused-bg)] rounded-sm text-[var(--pd-input-field-focused-text)] placeholder-[var(--pd-input-field-placeholder-text)]"
-      placeholder="Bug Description"></textarea>
+      placeholder={descriptionPlaceholder}></textarea>
 
   </svelte:fragment>
   <svelte:fragment slot="validation">