feat(feedback): adding frontend checkbox to include system info (podman-desktop#10116)

* feat(feedback): adding frontend checkbox to include system info

Signed-off-by: axel7083 <[email protected]>

* fix: text position

Signed-off-by: axel7083 <[email protected]>

* fix: adding missing line caught by @gastoner

Signed-off-by: axel7083 <[email protected]>

---------

Signed-off-by: axel7083 <[email protected]>

Author: axel7083

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

@@ -21,7 +21,7 @@ import '@testing-library/jest-dom/vitest';
 import { render, type RenderResult } from '@testing-library/svelte';
 import userEvent from '@testing-library/user-event';
 import { type Component, type ComponentProps } from 'svelte';
-import { beforeAll, beforeEach, expect, test, vi } from 'vitest';
+import { beforeAll, beforeEach, describe, expect, test, vi } from 'vitest';
 
 import type { FeedbackCategory } from '/@api/feedback';
 
@@ -57,6 +57,7 @@ function renderGitHubIssueFeedback(props: ComponentProps<typeof GitHubIssueFeedb
   title: HTMLInputElement;
   description: HTMLTextAreaElement;
   preview: HTMLButtonElement;
+  includeSystemInfo?: HTMLElement;
 } & RenderResult<Component<ComponentProps<typeof GitHubIssueFeedback>>> {
   const { getByRole, queryByTitle, ...restResult } = render(GitHubIssueFeedback, props);
 
@@ -71,25 +72,30 @@ function renderGitHubIssueFeedback(props: ComponentProps<typeof GitHubIssueFeedb
   const preview = getByRole('button', { name: 'Preview on GitHub' });
   expect(preview).toBeInstanceOf(HTMLButtonElement);
 
+  // checkbox
+  const includeSystemInfo = queryByTitle('Include system information') ?? undefined;
+
   return {
     title: title as HTMLInputElement,
     description: description as HTMLTextAreaElement,
     preview: preview as HTMLButtonElement,
+    includeSystemInfo,
     getByRole,
     queryByTitle,
     ...restResult,
   };
 }
 
 test('Expect feedback form to to be GitHub issue feedback form', async () => {
-  const { title, description } = renderGitHubIssueFeedback({
+  const { title, description, includeSystemInfo } = renderGitHubIssueFeedback({
     category: 'bug',
     onCloseForm: vi.fn(),
     contentChange: vi.fn(),
   });
 
   expect(title).toBeInTheDocument();
   expect(description).toBeInTheDocument();
+  expect(includeSystemInfo).toBeInTheDocument();
 });
 
 test('Expect Preview on GitHub button to be disabled if there is no title or description', async () => {
@@ -184,3 +190,52 @@ test.each(['bug', 'feature'])('Expect %s to be included in previewOnGitHub call'
     }),
   );
 });
+
+describe('includeSystemInfo', () => {
+  test('should not be visible on category feature', async () => {
+    const { includeSystemInfo } = renderGitHubIssueFeedback({
+      category: 'feature',
+      onCloseForm: vi.fn(),
+      contentChange: vi.fn(),
+    });
+    expect(includeSystemInfo).toBeUndefined();
+  });
+
+  test('should be visible on category bug and enabled by default', async () => {
+    const { includeSystemInfo } = renderGitHubIssueFeedback({
+      category: 'bug',
+      onCloseForm: vi.fn(),
+      contentChange: vi.fn(),
+    });
+    expect(includeSystemInfo).toBeInTheDocument();
+
+    // enabled by default
+    expect(includeSystemInfo?.children?.[0]).toHaveClass('text-[var(--pd-input-checkbox-checked)]');
+  });
+
+  test('uncheck the Include system information should set includeSystemInfo to false', async () => {
+    const { preview, title, description, includeSystemInfo } = renderGitHubIssueFeedback({
+      category: 'bug',
+      onCloseForm: vi.fn(),
+      contentChange: vi.fn(),
+    });
+
+    if (!includeSystemInfo) throw new Error('includeSystemInfo should be defined');
+
+    // type dummy data
+    await userEvent.type(title, 'Bug title');
+    await userEvent.type(description, 'Bug description');
+
+    // uncheck
+    await userEvent.click(includeSystemInfo);
+
+    // open in GitHub
+    await userEvent.click(preview);
+
+    expect(previewOnGitHubMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        includeSystemInfo: false,
+      }),
+    );
+  });
+});

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Button, ErrorMessage, Link } from '@podman-desktop/ui-svelte';
+import { Button, Checkbox, ErrorMessage, Link } from '@podman-desktop/ui-svelte';
 
 import FeedbackForm from '/@/lib/feedback/FeedbackForm.svelte';
 import type { FeedbackCategory, GitHubIssue } from '/@api/feedback';
@@ -14,6 +14,8 @@ let { onCloseForm = () => {}, category = 'bug', contentChange }: Props = $props(
 
 let issueTitle = $state('');
 let issueDescription = $state('');
+let includeSystemInfo: boolean = $state(true); // default to true
+
 let issueValidationError = $derived.by(() => {
   if (!issueTitle) {
     if (!issueDescription) {
@@ -46,9 +48,10 @@ async function openGitHubIssues(): Promise<void> {
 
 async function previewOnGitHub(): Promise<void> {
   const issueProperties: GitHubIssue = {
-    category: category,
-    title: issueTitle,
-    description: issueDescription,
+    category: $state.snapshot(category),
+    title: $state.snapshot(issueTitle),
+    description: $state.snapshot(issueDescription),
+    includeSystemInfo: $state.snapshot(includeSystemInfo),
   };
   try {
     await window.previewOnGitHub(issueProperties);
@@ -86,6 +89,15 @@ async function previewOnGitHub(): Promise<void> {
       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={descriptionPlaceholder}></textarea>
 
+    <!-- additional form content for bug category -->
+    {#if category === 'bug'}
+      <div class="flex flex-row align-items items-center mt-2">
+        <Checkbox
+          title="Include system information"
+          bind:checked={includeSystemInfo} />
+        <div>Include system information (os, architecture etc.)</div>
+      </div>
+    {/if}
   </svelte:fragment>
   <svelte:fragment slot="validation">
     {#if !issueTitle || !issueDescription}