@cratis/showrunner.usher.react 0.0.0-bootstrap.0 → 0.0.0-stage

package/Provider/UsherContext.ts

@@ -1,109 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { ArcConfiguration } from '@cratis/arc.react';
-import { SliceLocation } from '@cratis/arc/reflection';
-import { Guid } from '@cratis/fundamentals';
-import { createContext, useContext } from 'react';
-import { resolveLabels, UsherLabels } from '../Labels/index.js';
-
-/**
- * What {@link UsherProvider} gives the Usher components.
- */
-export interface UsherContextValue {
-    /** Whether an {@link UsherProvider} provides the value; the defaults otherwise. */
-    readonly isProvided: boolean;
-
-    /** The labels to show. */
-    readonly labels: UsherLabels;
-
-    /** The name of the application, shown with what a report sends; empty when not given. */
-    readonly applicationName: string;
-
-    /** The version of the application, sent with every report; empty when not given. */
-    readonly applicationVersion: string;
-
-    /** Whether the report dialogs let support know who the reporter is unless they choose otherwise. */
-    readonly shareIdentityByDefault: boolean;
-
-    /** The locale to format dates and times for; the browser's when not given. */
-    readonly locale?: string;
-
-    /** The Arc configuration without correlation tracking, for Usher's own commands and queries. */
-    readonly untrackedArc?: ArcConfiguration;
-
-    /**
-     * Gets the correlation ids of the last few Arc commands and queries run, oldest first.
-     * @returns The correlation ids.
-     */
-    recentCorrelationIds(): Guid[];
-
-    /**
-     * Tracks the correlation id of a command or query run, such as one from a `CommandResult`.
-     * @param correlationId The correlation id.
-     */
-    trackCorrelationId(correlationId: Guid | string): void;
-
-    /**
-     * Opens the report a problem dialog.
-     * @param location Where in the application the reporter is.
-     */
-    reportIssue(location: SliceLocation): void;
-
-    /**
-     * Opens the report this error dialog.
-     * @param error The error: `ErrorDetails` from `@cratis/showrunner.usher`, or anything thrown.
-     * @param location Where in the application the reporter is.
-     */
-    reportError(error: unknown, location: SliceLocation): void;
-
-    /**
-     * Opens the my issues side sheet with the list of issues.
-     * @param location Where in the application the user is, for a problem they report from the side sheet.
-     */
-    showMyIssues(location: SliceLocation): void;
-
-    /**
-     * Opens the my issues side sheet on one issue.
-     * @param issueId The issue.
-     */
-    showIssue(issueId: Guid): void;
-}
-
-const noop = () => {
-    /* Without an UsherProvider there are no dialogs to open. */
-};
-
-/**
- * The value without an {@link UsherProvider}: English labels, and nothing to open.
- */
-export const defaultUsherContextValue: UsherContextValue = {
-    isProvided: false,
-    labels: resolveLabels(),
-    applicationName: '',
-    applicationVersion: '',
-    shareIdentityByDefault: false,
-    recentCorrelationIds: () => [],
-    trackCorrelationId: noop,
-    reportIssue: noop,
-    reportError: noop,
-    showMyIssues: noop,
-    showIssue: noop
-};
-
-/**
- * The React context {@link UsherProvider} provides.
- */
-export const UsherContext = createContext<UsherContextValue>(defaultUsherContextValue);
-
-/**
- * Gets what {@link UsherProvider} provides, or the defaults outside one.
- * @returns The {@link UsherContextValue}.
- */
-export const useUsherContext = (): UsherContextValue => useContext(UsherContext);
-
-/**
- * Gets the labels to show.
- * @returns The {@link UsherLabels}.
- */
-export const useUsherLabels = (): UsherLabels => useContext(UsherContext).labels;

package/Provider/UsherProvider.tsx

@@ -1,134 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { ArcContext } from '@cratis/arc.react';
-import { DialogResult, useDialog } from '@cratis/arc.react/dialogs';
-import { SliceLocation } from '@cratis/arc/reflection';
-import { toast } from '@cratis/components/Notifications';
-import { Guid } from '@cratis/fundamentals';
-import { ReactNode, useContext, useMemo, useRef } from 'react';
-import { CorrelationTracker, defaultCorrelationIdHeader, withCorrelationIdHeader } from '../Correlation/index.js';
-import { MyIssuesDialog } from '../Issues/MyIssues/MyIssuesDialog.js';
-import { resolveLabels, UsherLabelOverrides } from '../Labels/index.js';
-import { ReportErrorDialog } from '../Reporting/ReportErrorDialog.js';
-import { ReportIssueDialog } from '../Reporting/ReportIssueDialog.js';
-import { ReportSent } from '../Reporting/ReportSent.js';
-import { toErrorDetails } from '../Reporting/reportValues.js';
-import { UsherContext, UsherContextValue } from './UsherContext.js';
-
-/**
- * Props for {@link UsherProvider}.
- */
-export interface UsherProviderProps {
-    /** The version of the application, sent with every report. */
-    applicationVersion?: string;
-
-    /** The name of the application, shown with what a report sends. */
-    applicationName?: string;
-
-    /** Whether the report dialogs let support know who the reporter is unless they choose otherwise. Defaults to false. */
-    shareIdentityByDefault?: boolean;
-
-    /** The labels that replace the English defaults, for instance to localize them. */
-    labels?: UsherLabelOverrides;
-
-    /** The locale to format dates and times for; the browser's when not given. */
-    locale?: string;
-
-    /** How many recent correlation ids of Arc commands and queries a report carries. Defaults to 5. */
-    correlationIdCount?: number;
-
-    /** The HTTP header the backend reads the correlation id from. Defaults to `X-Correlation-ID`, as Arc does. */
-    correlationIdHeader?: string;
-
-    /** The application. */
-    children?: ReactNode;
-}
-
-/**
- * Slots Usher into an application: renders the report and my issues dialogs once, gives {@link useUsher} and the
- * Usher buttons what they need, and tracks the correlation ids of the Arc commands and queries the application runs.
- * Render it inside `<Arc>`, the `DialogComponents` registration and a `CratisComponentsProvider` with a toaster.
- */
-export const UsherProvider = ({
-    applicationVersion = '',
-    applicationName = '',
-    shareIdentityByDefault = false,
-    labels,
-    locale,
-    correlationIdCount = 5,
-    correlationIdHeader = defaultCorrelationIdHeader,
-    children
-}: UsherProviderProps) => {
-    const arc = useContext(ArcContext);
-    const tracker = useRef<CorrelationTracker>(undefined);
-    if (!tracker.current || tracker.current.capacity !== correlationIdCount) {
-        tracker.current = new CorrelationTracker(correlationIdCount);
-    }
-    const correlationTracker = tracker.current;
-    const lastLocation = useRef<SliceLocation>(SliceLocation.empty);
-
-    const trackedArc = useMemo(() => ({
-        ...arc,
-        httpHeadersCallback: withCorrelationIdHeader(arc.httpHeadersCallback, correlationTracker, correlationIdHeader)
-    }), [arc, correlationTracker, correlationIdHeader]);
-
-    const [ReportIssueDialogWrapper, showReportIssueDialog] = useDialog<ReportSent, Parameters<typeof ReportIssueDialog>[0]>(ReportIssueDialog);
-    const [ReportErrorDialogWrapper, showReportErrorDialog] = useDialog<ReportSent, Parameters<typeof ReportErrorDialog>[0]>(ReportErrorDialog);
-    const [MyIssuesDialogWrapper, showMyIssuesDialog] = useDialog<object, Parameters<typeof MyIssuesDialog>[0]>(MyIssuesDialog);
-
-    const resolvedLabels = useMemo(() => resolveLabels(labels), [labels]);
-
-    const value = useMemo<UsherContextValue>(() => {
-        const reportIssue = (location: SliceLocation) => {
-            lastLocation.current = location;
-            void showReportIssueDialog({ location, correlationIds: correlationTracker.correlationIds }).then(reportSent);
-        };
-
-        const showIssue = (issueId: Guid) => void showMyIssuesDialog({ issueId, onReportIssue: () => reportIssue(lastLocation.current) });
-
-        const reportSent = ([result, response]: [DialogResult, ReportSent?]) => {
-            if (result !== DialogResult.Ok || !response) {
-                return;
-            }
-
-            toast.success({
-                title: resolvedLabels.reportSent.title,
-                action: { children: resolvedLabels.reportSent.view, onClick: () => showIssue(response.issueId) }
-            });
-        };
-
-        return {
-            isProvided: true,
-            labels: resolvedLabels,
-            applicationName,
-            applicationVersion,
-            shareIdentityByDefault,
-            locale,
-            untrackedArc: arc,
-            recentCorrelationIds: () => correlationTracker.correlationIds,
-            trackCorrelationId: correlationId => correlationTracker.track(correlationId),
-            reportIssue,
-            reportError: (error, location) => {
-                lastLocation.current = location;
-                void showReportErrorDialog({ error: toErrorDetails(error, location), location, correlationIds: correlationTracker.correlationIds }).then(reportSent);
-            },
-            showMyIssues: location => {
-                lastLocation.current = location;
-                void showMyIssuesDialog({ onReportIssue: () => reportIssue(location) });
-            },
-            showIssue
-        };
-    }, [resolvedLabels, applicationName, applicationVersion, shareIdentityByDefault, locale, arc, correlationTracker, showReportIssueDialog, showReportErrorDialog, showMyIssuesDialog]);
-
-    return (
-        <UsherContext.Provider value={value}>
-            <ArcContext.Provider value={trackedArc}>
-                {children}
-            </ArcContext.Provider>
-            <ReportIssueDialogWrapper />
-            <ReportErrorDialogWrapper />
-            <MyIssuesDialogWrapper />
-        </UsherContext.Provider>
-    );
-};

package/Provider/index.ts

@@ -1,7 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-export * from './UsherBoundary.js';
-export * from './UsherContext.js';
-export * from './UsherProvider.js';
-export * from './useUsher.js';

package/Provider/useUsher.ts

@@ -1,72 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { useSliceContext } from '@cratis/arc.react/slices';
-import { Guid } from '@cratis/fundamentals';
-import { useMemo } from 'react';
-import { UsherLabels } from '../Labels/index.js';
-import { useUsherContext } from './UsherContext.js';
-
-/**
- * What {@link useUsher} gives a component.
- */
-export interface Usher {
-    /** The labels Usher shows. */
-    readonly labels: UsherLabels;
-
-    /**
-     * Opens the report a problem dialog, with where in the application the component is.
-     */
-    reportIssue(): void;
-
-    /**
-     * Opens the report this error dialog.
-     * @param error The error: `ErrorDetails` from `@cratis/showrunner.usher`, such as `errorDetailsFromCommandResult`
-     * gives for a failed command, or anything thrown.
-     */
-    reportError(error: unknown): void;
-
-    /**
-     * Opens the my issues side sheet.
-     */
-    showMyIssues(): void;
-
-    /**
-     * Opens the my issues side sheet on one issue.
-     * @param issueId The issue.
-     */
-    showIssue(issueId: Guid): void;
-
-    /**
-     * Gets the correlation ids of the last few Arc commands and queries run, oldest first.
-     * @returns The correlation ids.
-     */
-    recentCorrelationIds(): Guid[];
-
-    /**
-     * Tracks the correlation id of a command or query, such as one from a `CommandResult` of a command run outside
-     * the application's `<Arc>` context.
-     * @param correlationId The correlation id.
-     */
-    trackCorrelationId(correlationId: Guid | string): void;
-}
-
-/**
- * Uses Usher from any component inside an {@link UsherProvider}. Reports carry the slice location of the component
- * that calls this hook.
- * @returns The {@link Usher}.
- */
-export function useUsher(): Usher {
-    const context = useUsherContext();
-    const location = useSliceContext();
-
-    return useMemo(() => ({
-        labels: context.labels,
-        reportIssue: () => context.reportIssue(location),
-        reportError: (error: unknown) => context.reportError(error, location),
-        showMyIssues: () => context.showMyIssues(location),
-        showIssue: (issueId: Guid) => context.showIssue(issueId),
-        recentCorrelationIds: () => context.recentCorrelationIds(),
-        trackCorrelationId: (correlationId: Guid | string) => context.trackCorrelationId(correlationId)
-    }), [context, location]);
-}

package/Reporting/AccessChoice.ts

@@ -1,107 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { AccessDuration } from '@cratis/showrunner.usher';
-
-/**
- * What the reporter chose about letting support sign in as them.
- */
-export interface AccessChoice {
-    /** Whether the reporter chose to let support know who they are, apart from granting access. */
-    readonly shareIdentity: boolean;
-
-    /** Whether the reporter lets support sign in as them. */
-    readonly grantAccess: boolean;
-
-    /** For how long. */
-    readonly accessDuration: AccessDuration;
-}
-
-/**
- * Gets the choice before the reporter has chosen anything: no access, for one day once they grant it.
- * @param shareIdentity Whether to let support know who the reporter is unless they choose otherwise.
- * @returns The {@link AccessChoice}.
- */
-export function initialAccessChoice(shareIdentity: boolean): AccessChoice {
-    return { shareIdentity, grantAccess: false, accessDuration: AccessDuration.oneDay };
-}
-
-const durationsInMilliseconds: Record<AccessDuration, number> = {
-    [AccessDuration.oneHour]: 60 * 60 * 1000,
-    [AccessDuration.oneDay]: 24 * 60 * 60 * 1000,
-    [AccessDuration.sevenDays]: 7 * 24 * 60 * 60 * 1000
-};
-
-/**
- * Applies a change of a command field to the access choice; changes of other fields leave it as it is. While access is
- * granted, sharing who the reporter is is forced, so a change of it is not the reporter's own choice.
- * @param choice The current {@link AccessChoice}.
- * @param fieldName The name of the command field that changed.
- * @param value Its new value.
- * @returns The new {@link AccessChoice}.
- */
-export function changeAccessChoice(choice: AccessChoice, fieldName: string, value: unknown): AccessChoice {
-    if (fieldName === 'shareIdentity' && !choice.grantAccess) {
-        return { ...choice, shareIdentity: value === true };
-    }
-
-    if (fieldName === 'grantAccess') {
-        return { ...choice, grantAccess: value === true };
-    }
-
-    const duration = typeof value === 'string' && value.length > 0 ? Number(value) : value;
-    if (fieldName === 'accessDuration' && isAccessDuration(duration)) {
-        return { ...choice, accessDuration: duration };
-    }
-
-    return choice;
-}
-
-/**
- * Gets whether the command shares who the reporter is: always while access is granted, as granting access always
- * shares who the reporter is, and otherwise as the reporter chose.
- * @param choice The {@link AccessChoice}.
- * @returns The value of the command's `shareIdentity`.
- */
-export function sharesIdentity(choice: AccessChoice): boolean {
-    return choice.grantAccess || choice.shareIdentity;
-}
-
-/**
- * Gets when access granted now would end. The backend fixes the end itself when it records the grant; this is what
- * the reporter is told before they send.
- * @param duration The {@link AccessDuration}.
- * @param now What time it is.
- * @returns When access would end.
- */
-export function validUntilFor(duration: AccessDuration, now: Date): Date {
-    return new Date(now.getTime() + durationsInMilliseconds[duration]);
-}
-
-/**
- * Formats a point in time for the access notice and the access panel, such as `27 Oct, 18:10`.
- * @param time The point in time.
- * @param locale The locale to format for; the browser's when not given.
- * @param timeZone The time zone to format in; the browser's when not given.
- * @returns The formatted point in time.
- */
-export function formatTime(time: Date, locale?: string, timeZone?: string): string {
-    const date = new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'short', timeZone }).format(time);
-    const clock = new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone }).format(time);
-    return `${date}, ${clock}`;
-}
-
-/**
- * Formats the time of day only, such as `18:10`.
- * @param time The point in time.
- * @param locale The locale to format for; the browser's when not given.
- * @param timeZone The time zone to format in; the browser's when not given.
- * @returns The formatted time of day.
- */
-export function formatClock(time: Date, locale?: string, timeZone?: string): string {
-    return new Intl.DateTimeFormat(locale, { hour: '2-digit', minute: '2-digit', hourCycle: 'h23', timeZone }).format(time);
-}
-
-function isAccessDuration(value: unknown): value is AccessDuration {
-    return typeof value === 'number' && Object.hasOwn(durationsInMilliseconds, value);
-}

package/Reporting/AccessFields.tsx

@@ -1,74 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { CheckboxField, DropdownField, ToggleSwitchField } from '@cratis/components/CommandForm';
-import { AccessDuration } from '@cratis/showrunner.usher';
-import { useId } from 'react';
-import { useUsherLabels } from '../Provider/UsherContext.js';
-import { AccessChoice } from './AccessChoice.js';
-import { AccessNotice } from './AccessNotice.js';
-import { durationOptions } from './durationOptions.js';
-
-/**
- * The command values {@link AccessFields} bind to.
- */
-export interface IdentityAndAccess {
-    /** Whether to let support know who the reporter is. */
-    shareIdentity: boolean;
-    /** Whether to let support sign in as the reporter. */
-    grantAccess: boolean;
-    /** For how long. */
-    accessDuration: AccessDuration;
-}
-
-/**
- * Props for {@link AccessFields}.
- */
-export interface AccessFieldsProps {
-    /** The reporter's {@link AccessChoice}, as the form follows it. */
-    choice: AccessChoice;
-}
-
-/**
- * The identity and access choices of a report: let support know who the reporter is, and let support sign in as
- * them for a while. Granting access always shares who the reporter is, so the checkbox is checked and disabled while
- * access is granted, and the notice says until when support can act as the reporter.
- */
-export const AccessFields = <TCommand extends IdentityAndAccess>({ choice }: AccessFieldsProps) => {
-    const labels = useUsherLabels();
-    const shareDescriptionId = useId();
-    const grantDescriptionId = useId();
-    const noticeId = useId();
-
-    return (
-        <div className='usher-access-fields'>
-            <div className='usher-access-fields__choice'>
-                <CheckboxField<TCommand>
-                    value={command => command.shareIdentity}
-                    label={labels.access.shareIdentity}
-                    aria-describedby={choice.grantAccess ? `${shareDescriptionId} ${noticeId}` : shareDescriptionId}
-                    pt={{ input: { disabled: choice.grantAccess } }} />
-                <p id={shareDescriptionId} className='usher-access-fields__description'>{labels.access.shareIdentityDescription}</p>
-            </div>
-            <div className='usher-access-fields__choice'>
-                <ToggleSwitchField<TCommand>
-                    value={command => command.grantAccess}
-                    label={labels.access.grantAccess}
-                    aria-describedby={grantDescriptionId} />
-                <p id={grantDescriptionId} className='usher-access-fields__description'>{labels.access.grantAccessDescription}</p>
-            </div>
-            {choice.grantAccess && (
-                <div className='usher-access-fields__duration'>
-                    <DropdownField<TCommand>
-                        value={command => command.accessDuration}
-                        title={labels.access.duration}
-                        aria-describedby={noticeId}
-                        options={durationOptions(labels)}
-                        optionValue='value'
-                        optionLabel='label' />
-                    <AccessNotice id={noticeId} duration={choice.accessDuration} />
-                </div>
-            )}
-        </div>
-    );
-};

package/Reporting/AccessNotice.tsx

@@ -1,33 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { Message } from '@cratis/components/Display';
-import { AccessDuration } from '@cratis/showrunner.usher';
-import { format } from '../Labels/index.js';
-import { useUsherContext } from '../Provider/UsherContext.js';
-import { formatTime, validUntilFor } from './AccessChoice.js';
-
-/**
- * Props for {@link AccessNotice}.
- */
-export interface AccessNoticeProps {
-    /** The id of the notice, for the controls it describes. */
-    id: string;
-
-    /** For how long access would be granted. */
-    duration: AccessDuration;
-}
-
-/**
- * States plainly what granting access means: support sees who the reporter is and can act as them until a given time.
- */
-export const AccessNotice = ({ id, duration }: AccessNoticeProps) => {
-    const { labels, locale } = useUsherContext();
-    const time = formatTime(validUntilFor(duration, new Date()), locale);
-
-    return (
-        <div id={id} className='usher-access-notice'>
-            <Message severity='info' live={false} text={format(labels.access.notice, { time })} />
-        </div>
-    );
-};

package/Reporting/ReportErrorDialog.tsx

@@ -1,94 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-import { DialogResult, useDialogContext } from '@cratis/arc.react/dialogs';
-import { useSliceContext } from '@cratis/arc.react/slices';
-import { SliceLocation as ArcSliceLocation } from '@cratis/arc/reflection';
-import { CommandDialog } from '@cratis/components/CommandDialog';
-import { TextAreaField } from '@cratis/components/CommandForm';
-import { DialogInitialFocus } from '@cratis/components/Dialogs';
-import { Guid } from '@cratis/fundamentals';
-import { IReportError, ReportError } from '@cratis/showrunner.usher';
-import { useState } from 'react';
-import { UsherBoundary } from '../Provider/UsherBoundary.js';
-import { useUsherContext } from '../Provider/UsherContext.js';
-import { AccessFields } from './AccessFields.js';
-import { ReportSent } from './ReportSent.js';
-import { reportErrorValues, toErrorDetails } from './reportValues.js';
-import { SentWithReport } from './SentWithReport.js';
-import { TechnicalDetails } from './TechnicalDetails.js';
-import { useAccessChoice } from './useAccessChoice.js';
-
-/**
- * Props for {@link ReportErrorDialog}.
- */
-export interface ReportErrorDialogProps {
-    /** The error: `ErrorDetails` from `@cratis/showrunner.usher`, or anything thrown. */
-    error?: unknown;
-
-    /** Where in the application the reporter is, when the error does not say; the slice context the dialog is rendered in when not given. */
-    location?: ArcSliceLocation;
-
-    /** The correlation ids to send besides the error's own; the recent ones {@link UsherProvider} tracked when not given. */
-    correlationIds?: Guid[];
-}
-
-/**
- * The report this error dialog: the error is captured already, and the reporter may say what they were doing and
- * choose whether support may know who they are and sign in as them. The technical details are collapsed. Open it
- * with `useDialog`; it closes with {@link ReportSent} once the report is sent.
- */
-export const ReportErrorDialog = ({ error, location, correlationIds }: ReportErrorDialogProps) => {
-    const usher = useUsherContext();
-    const sliceLocation = useSliceContext();
-    const [values] = useState(() => reportErrorValues(toErrorDetails(error, location ?? sliceLocation), {
-        issueId: Guid.create(),
-        location: location ?? sliceLocation,
-        correlationIds: correlationIds ?? usher.recentCorrelationIds(),
-        applicationVersion: usher.applicationVersion,
-        shareIdentity: usher.shareIdentityByDefault
-    }));
-
-    return (
-        <UsherBoundary>
-            <ReportErrorForm values={values} />
-        </UsherBoundary>
-    );
-};
-
-const ReportErrorForm = ({ values }: { values: IReportError }) => {
-    const { labels, shareIdentityByDefault } = useUsherContext();
-    const { closeDialog } = useDialogContext<ReportErrorDialogProps, ReportSent>();
-    const access = useAccessChoice(shareIdentityByDefault);
-
-    return (
-        <CommandDialog<ReportError>
-            command={ReportError}
-            title={labels.reportError.title}
-            subtitle={values.errorMessage}
-            okLabel={labels.reportError.send}
-            cancelLabel={labels.common.cancel}
-            closeAriaLabel={labels.common.close}
-            width='560px'
-            initialFocus={DialogInitialFocus.Content}
-            initialValues={access.initialValues(values)}
-            currentValues={access.currentValues}
-            onFieldChange={access.onFieldChange}
-            onSuccess={() => closeDialog(DialogResult.Ok, { issueId: values.issueId! })}>
-            <div className='usher-report-form'>
-                <SentWithReport location={values.location!} correlationIdCount={values.correlationIds!.length} />
-                <TechnicalDetails
-                    errorType={values.errorType!}
-                    correlationIds={values.correlationIds!}
-                    stackFrames={values.stackFrames!} />
-                <TextAreaField<ReportError>
-                    value={command => command.details}
-                    title={labels.reportError.details}
-                    placeholder={labels.reportError.detailsPlaceholder}
-                    required={false}
-                    rows={3} />
-                <AccessFields<ReportError> choice={access.choice} />
-            </div>
-        </CommandDialog>
-    );
-};