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

package/Provider/UsherContext.ts

@@ -0,0 +1,109 @@
+// 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

@@ -0,0 +1,134 @@
+// 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

@@ -0,0 +1,7 @@
+// 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

@@ -0,0 +1,72 @@
+// 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/README.md

@@ -0,0 +1,72 @@
+# @cratis/showrunner.usher.react
+
+React components for Usher, the Showrunner support part: report a problem, report this error, and the my issues side
+sheet with each issue's conversation. Built on `@cratis/components` and the generated proxies in
+`@cratis/showrunner.usher`. How to use it: [Documentation/Usher/react.md](../../../Documentation/Usher/react.md).
+
+## Component hierarchy
+
+```
+UsherProvider                 provides UsherContext, wraps ArcContext for correlation tracking, renders the dialogs once
+├── ReportIssueDialog         CommandDialog<ReportIssue>
+│   ├── SentWithReport        what is sent along: location, version, recent requests
+│   └── AccessFields          share identity / grant access / duration, with AccessNotice
+├── ReportErrorDialog         CommandDialog<ReportError>
+│   ├── TechnicalDetails      collapsed <details>: type, correlation id, stack frames
+│   ├── SentWithReport
+│   └── AccessFields
+└── MyIssuesDialog            Dialog placement='end', 720px
+    ├── IssueList             DataTableForObservableQuery<MyIssues>
+    └── IssueView             also exported on its own
+        ├── IssueHeader, StatusStrip, QuestionBanner
+        ├── IssueConversationPanel   ChatConversation; AnswerQuestion or AddDetails
+        ├── IdentityPanel            ShareIdentityDialog
+        ├── AccessPanel              GrantAccessDialog, revoke with confirmation, SupportSessions
+        └── IssueActions             ReopenIssueDialog, withdraw with confirmation
+ReportButton, MyIssuesButton  open the dialogs through useUsher()
+```
+
+## Architecture decisions
+
+- **One provider, dialogs rendered once.** `UsherProvider` owns the `useDialog` wrappers; the buttons and `useUsher()`
+  only call into `UsherContext`. The location of the caller is taken with `useSliceContext()` where `useUsher()` is
+  called and passed to the dialog, because the dialogs render at the provider, outside the caller's slice scope.
+- **Correlation tracking through the HTTP headers callback.** Arc has no global observer of command or query results,
+  but Arc React hands each command and snapshot query the `httpHeadersCallback` of the nearest `ArcContext`. The
+  provider wraps it to add an `X-Correlation-ID` to every request and remember it (`Correlation/`). Arc's backend uses
+  the id a request carries. Observable queries go over Arc's shared hub connection and are not tracked.
+- **`UsherBoundary` keeps Usher out of what it reports.** Usher's own components run with the untracked `ArcContext`
+  and inside a `<Slice>` boundary, so its requests are not sent with a report and its proxies do not change the slice
+  context of the application around them.
+- **Granting access forces sharing identity.** `useAccessChoice` follows the form through `onFieldChange` and forces
+  `shareIdentity` through `currentValues`. `shareIdentity` is left out of `initialValues`, because the form merges
+  `initialValues` over `currentValues`.
+
+## State
+
+Decisions live in pure, specified modules; the components render and wire events:
+
+| Module | Decides |
+| --- | --- |
+| `Reporting/AccessChoice.ts` | access choice transitions, forced identity, until when access lasts |
+| `Reporting/reportValues.ts` | the initial values of a report, error details from what was thrown |
+| `Issues/issueStates.ts` | state badges, closed states, status strip step |
+| `Issues/MyIssuesList.ts` | waiting count, closed filter, fix released |
+| `Issues/conversationMessages.ts` | chat authors and message bodies |
+| `Issues/accessStatus.ts` | whether support may sign in, against the clock |
+| `Issues/MyIssues/MyIssuesNavigation.ts` | list or issue, show closed |
+| `Buttons/buttonModels.ts` | text, tooltip and accessible name of the buttons |
+| `Labels/` | English defaults, deep overrides, placeholders |
+
+## CSS conventions
+
+One stylesheet, `styles.css`, exported as `@cratis/showrunner.usher.react/styles`; the build has no CSS pipeline, so
+components do not import CSS. Classes are prefixed `usher-` with BEM-like element names, and every color, border and
+radius comes from the `--cratis-*` tokens. State is styled through `data-*` attributes (`data-highlighted`,
+`data-reached`, `data-current`).
+
+## Extending
+
+- A new text: add it to `UsherLabels` and `defaultUsherLabels`; every component reads labels from `UsherContext`.
+- A new conversation entry kind: add its sentence to `ConversationEventLabels` and map it in `conversationMessages.ts`.
+- A new dialog: render its `useDialog` wrapper in `UsherProvider` and add an opener to `UsherContextValue` and `useUsher`.

package/Reporting/AccessChoice.ts

@@ -0,0 +1,107 @@
+// 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

@@ -0,0 +1,74 @@
+// 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

@@ -0,0 +1,33 @@
+// 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>
+    );
+};