Add report issue workflow to backend and toolbar UI

core-web/apps/dotcms-ui/src/app/api/services/dot-report-issue.service.spec.ts

@@ -0,0 +1,98 @@
+import { provideHttpClient } from '@angular/common/http';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import {
+    DotReportIssueContentlet,
+    DotReportIssuePayload,
+    DotReportIssueService
+} from './dot-report-issue.service';
+
+const MOCK_REPORT_ISSUE_CONTENTLET: DotReportIssueContentlet = {
+    archived: false,
+    baseType: 'CONTENT',
+    contentType: 'Bug',
+    folder: 'SYSTEM_FOLDER',
+    hasTitleImage: false,
+    host: 'host-id',
+    hostName: 'dotcms.dev',
+    identifier: 'identifier-id',
+    inode: 'inode-id',
+    languageId: 1,
+    live: false,
+    locked: false,
+    modDate: '1778806040235',
+    modUser: 'user-id',
+    modUserName: 'Bug Reporter',
+    owner: 'user-id',
+    sortOrder: 0,
+    stInode: 'stInode-id',
+    title: '/plugins [1.0.0-SNAPSHOT - Chrome]',
+    titleImage: 'screenshot',
+    url: '/content.inode-id',
+    working: true,
+    metadata: {
+        browser: 'Chrome',
+        url: 'http://localhost:8080/dotAdmin/#/plugins?mId=1a87'
+    }
+};
+
+describe('DotReportIssueService', () => {
+    let service: DotReportIssueService;
+    let httpTesting: HttpTestingController;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [provideHttpClient(), provideHttpClientTesting(), DotReportIssueService]
+        });
+
+        service = TestBed.inject(DotReportIssueService);
+        httpTesting = TestBed.inject(HttpTestingController);
+    });
+
+    afterEach(() => {
+        httpTesting.verify();
+    });
+
+    it('should submit report issue multipart payload with description and metadata', () => {
+        const payload: DotReportIssuePayload = {
+            description: 'Login button is unresponsive',
+            metadata: {
+                browser: 'Chrome',
+                url: 'http://localhost:8080/dotAdmin'
+            }
+        };
+
+        service.reportIssue(payload).subscribe((response) => {
+            expect(response).toEqual(MOCK_REPORT_ISSUE_CONTENTLET);
+        });
+
+        const req = httpTesting.expectOne('/api/v1/report-issue');
+        expect(req.request.method).toBe('POST');
+        expect(req.request.body).toBeInstanceOf(FormData);
+        expect(req.request.body.get('description')).toBe(payload.description);
+        expect(req.request.body.get('metadata')).toBe(JSON.stringify(payload.metadata));
+        expect(req.request.body.get('screenshot')).toBeNull();
+
+        req.flush({ entity: MOCK_REPORT_ISSUE_CONTENTLET });
+    });
+
+    it('should include screenshot when provided', () => {
+        const screenshot = new File(['image'], 'screenshot.png', { type: 'image/png' });
+        const payload: DotReportIssuePayload = {
+            description: 'Issue with screenshot',
+            metadata: {
+                browser: 'Safari'
+            },
+            screenshot
+        };
+
+        service.reportIssue(payload).subscribe();
+
+        const req = httpTesting.expectOne('/api/v1/report-issue');
+        expect(req.request.method).toBe('POST');
+        expect(req.request.body.get('screenshot')).toBe(screenshot);
+
+        req.flush({ entity: MOCK_REPORT_ISSUE_CONTENTLET });
+    });
+});

core-web/apps/dotcms-ui/src/app/api/services/dot-report-issue.service.ts

@@ -0,0 +1,81 @@
+import { Observable } from 'rxjs';
+
+import { HttpClient } from '@angular/common/http';
+import { Injectable, inject } from '@angular/core';
+
+import { map } from 'rxjs/operators';
+
+import { DotCMSContentlet, DotCMSResponse } from '@dotcms/dotcms-models';
+
+export interface DotReportIssuePayload {
+    description: string;
+    metadata: Record<string, string>;
+    screenshot?: File | null;
+}
+
+export interface DotReportIssueUserMetadata {
+    email: string;
+    fullName: string;
+    userId: string;
+}
+
+export interface DotReportIssueMetadata {
+    browser?: string;
+    dotcmsBuildDate?: string;
+    dotcmsVersion?: string;
+    platform?: string;
+    referer?: string;
+    referrer?: string;
+    remoteAddress?: string;
+    requestUrl?: string;
+    serverName?: string;
+    submittedAt?: string;
+    url?: string;
+    user?: DotReportIssueUserMetadata;
+    userAgent?: string;
+    viewport?: string;
+    [key: string]: unknown;
+}
+
+export interface DotReportIssueScreenshotMetadata {
+    contentType: string;
+    editableAsText: boolean;
+    fileSize: number;
+    height?: number;
+    isImage: boolean;
+    length: number;
+    modDate: number;
+    name: string;
+    sha256: string;
+    title: string;
+    version: number;
+    width?: number;
+}
+
+export interface DotReportIssueContentlet extends DotCMSContentlet {
+    metadata?: DotReportIssueMetadata;
+    screenshot?: string;
+    screenshotContentAsset?: string;
+    screenshotMetaData?: DotReportIssueScreenshotMetadata;
+    screenshotVersion?: string;
+}
+
+@Injectable()
+export class DotReportIssueService {
+    private readonly http = inject(HttpClient);
+
+    reportIssue(payload: DotReportIssuePayload): Observable<DotReportIssueContentlet> {
+        const formData = new FormData();
+
+        formData.append('description', payload.description);
+        formData.append('metadata', JSON.stringify(payload.metadata));
+
+        if (payload.screenshot) {
+            formData.append('screenshot', payload.screenshot);
+        }
+
+        return this.http
+            .post<DotCMSResponse<DotReportIssueContentlet>>('/api/v1/report-issue', formData)
+            .pipe(map((response) => response.entity));
+    }
+}

core-web/apps/dotcms-ui/src/app/providers.ts

@@ -52,6 +52,7 @@ import { DotAccountService } from './api/services/dot-account-service';
 import { DotDownloadBundleDialogService } from './api/services/dot-download-bundle-dialog/dot-download-bundle-dialog.service';
 import { DotMenuService } from './api/services/dot-menu.service';
 import { DotParseHtmlService } from './api/services/dot-parse-html/dot-parse-html.service';
+import { DotReportIssueService } from './api/services/dot-report-issue.service';
 import { AuthGuardService } from './api/services/guards/auth-guard.service';
 import { ContentletGuardService } from './api/services/guards/contentlet-guard.service';
 import { DefaultGuardService } from './api/services/guards/default-guard.service';
@@ -100,6 +101,7 @@ const PROVIDERS: Provider[] = [
     DotMessageService,
     DotParseHtmlService,
     DotPushPublishFiltersService,
+    DotReportIssueService,
     DotRolesService,
     DotRouterService,
     DotSaveOnDeactivateService,

core-web/apps/dotcms-ui/src/app/view/components/dot-report-issue/dot-report-issue.component.html

@@ -0,0 +1,84 @@
+<p-dialog
+    [(visible)]="visible"
+    [header]="'report-an-issue' | dm"
+    [modal]="true"
+    [draggable]="false"
+    [resizable]="false"
+    [style]="{ width: '40rem' }"
+    appendTo="body"
+    data-testid="dot-report-issue-dialog"
+    (onHide)="handleClose()">
+    <form
+        (ngSubmit)="save()"
+        [formGroup]="form"
+        class="form"
+        data-testid="dot-report-issue-form"
+        novalidate>
+        @if (errorMessage()) {
+            <p class="mb-4 text-red-500" data-testid="dot-report-issue-error-message">
+                {{ errorMessage() }}
+            </p>
+        }
+        <div class="field">
+            <label dotFieldRequired for="dot-report-issue-description-input">
+                {{ 'report-an-issue.description' | dm }}
+            </label>
+            <textarea
+                formControlName="description"
+                id="dot-report-issue-description-input"
+                data-testid="dot-report-issue-description-input"
+                pInputTextarea
+                rows="6"></textarea>
+            @if (form.get('description')?.invalid && hasSubmitted()) {
+                <small class="p-invalid" data-testid="dot-report-issue-description-error">
+                    {{ errorMessages.descriptionRequired }}
+                </small>
+            }
+        </div>
+
+        <div class="field">
+            <label for="dot-report-issue-screenshot-input">
+                {{ 'report-an-issue.screenshot' | dm }}
+            </label>
+            <p-fileupload
+                #screenshotUpload
+                mode="advanced"
+                name="screenshot"
+                chooseIcon="pi pi-image"
+                [auto]="false"
+                [customUpload]="true"
+                [multiple]="false"
+                [showUploadButton]="false"
+                accept="image/png,image/jpeg,image/webp"
+                data-testid="dot-report-issue-screenshot-input"
+                id="dot-report-issue-screenshot-input"
+                (onSelect)="onScreenshotSelected($event)"
+                (onClear)="onScreenshotClear()"></p-fileupload>
+
+            @if (hasSubmitted() && getScreenshotErrorMessage(); as screenshotErrorMessage) {
+                <small class="p-invalid" data-testid="dot-report-issue-screenshot-error">
+                    {{ screenshotErrorMessage }}
+                </small>
+            }
+        </div>
+    </form>
+
+    <ng-template pTemplate="footer">
+        <button
+            pButton
+            type="button"
+            class="p-button-outlined"
+            [label]="'cancel' | dm"
+            [disabled]="isSubmitting()"
+            data-testid="dot-report-issue-cancel-button"
+            (click)="handleClose()"></button>
+        <button
+            pButton
+            type="submit"
+            [label]="'submit' | dm"
+            [loading]="isSubmitting()"
+            [disabled]="isSubmitting()"
+            data-testid="dot-report-issue-submit-button"
+            (click)="save()"></button>
+    </ng-template>
+</p-dialog>