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

package/README.md

@@ -1,72 +1,3 @@
-# @cratis/showrunner.usher.react
+# Temporary Holding Version
 
-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`.
+This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.

package/package.json

@@ -1,85 +1,6 @@
 {
-    "type": "module",
-    "name": "@cratis/showrunner.usher.react",
-    "version": "0.0.0-bootstrap.0",
-    "description": "React components for Usher — the Showrunner support part for issue reporting and support conversations, built on Cratis Arc and Cratis Components.",
-    "keywords": [
-        "cratis",
-        "showrunner",
-        "usher",
-        "support",
-        "arc",
-        "react",
-        "components"
-    ],
-    "homepage": "https://github.com/Cratis/Showrunner",
-    "author": "Cratis",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/Cratis/Showrunner.git"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "dist",
-        "styles.css",
-        "**/*.ts",
-        "**/*.tsx",
-        "!**/for_*/**",
-        "!**/given/**",
-        "!**/*.tsbuildinfo"
-    ],
-    "main": "dist/cjs/index.js",
-    "module": "dist/esm/index.js",
-    "types": "dist/esm/index.d.ts",
-    "exports": {
-        "./package.json": "./package.json",
-        ".": {
-            "import": {
-                "types": "./dist/esm/index.d.ts",
-                "default": "./dist/esm/index.js"
-            },
-            "require": {
-                "types": "./dist/cjs/index.d.ts",
-                "default": "./dist/cjs/index.js"
-            }
-        },
-        "./styles": "./styles.css"
-    },
-    "scripts": {
-        "prepare": "yarn g:build",
-        "clean": "yarn g:clean",
-        "compile": "yarn g:compile",
-        "build": "yarn g:build",
-        "lint": "yarn g:lint",
-        "lint:ci": "yarn g:lint:ci",
-        "test": "yarn g:test",
-        "test:watch": "yarn g:test:watch",
-        "ci": "yarn g:ci",
-        "up": "yarn g:up"
-    },
-    "dependencies": {
-        "@cratis/showrunner.usher": "0.0.0-bootstrap.0"
-    },
-    "devDependencies": {
-        "@cratis/arc": "22.146.0",
-        "@cratis/arc.react": "22.146.0",
-        "@cratis/components": "4.38.0",
-        "@cratis/fundamentals": "7.27.0",
-        "react": "^19.3.1",
-        "react-dom": "^19.3.1",
-        "reflect-metadata": "0.2.2"
-    },
-    "peerDependencies": {
-        "@cratis/arc": "^22.146.0",
-        "@cratis/arc.react": "^22.146.0",
-        "@cratis/components": "^4.38.0",
-        "@cratis/fundamentals": "^7.27.0",
-        "react": "^19.0.0"
-    },
-    "sideEffects": [
-        "*.css"
-    ]
+  "name": "@cratis/showrunner.usher.react",
+  "version": "0.0.0-stage",
+  "stub": true,
+  "description": "Temporary package placeholder for staged publishing"
 }

package/Buttons/MyIssuesButton.tsx

@@ -1,78 +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 { Button, IconButton } from '@cratis/components/Common';
-import { Badge } from '@cratis/components/Display';
-import { MyIssues } from '@cratis/showrunner.usher';
-import { InboxIcon } from '../Icons.js';
-import { waitingCount } from '../Issues/MyIssuesList.js';
-import { UsherBoundary } from '../Provider/UsherBoundary.js';
-import { useUsher } from '../Provider/useUsher.js';
-import { myIssuesButtonModel, UsherButtonSize } from './buttonModels.js';
-
-/**
- * Props for {@link MyIssuesButton}.
- */
-export interface MyIssuesButtonProps {
-    /** `large` shows the icon and the text; `small` shows the icon, with the text as tooltip and accessible name. Defaults to `large`. */
-    size?: UsherButtonSize;
-
-    /** Additional class name for the button. */
-    className?: string;
-}
-
-/**
- * Opens the my issues side sheet. A badge counts the issues support waits for the user on, and the accessible name
- * says how many.
- */
-export const MyIssuesButton = (props: MyIssuesButtonProps) => {
-    const usher = useUsher();
-
-    return (
-        <UsherBoundary>
-            <MyIssuesButtonContent {...props} onOpen={usher.showMyIssues} />
-        </UsherBoundary>
-    );
-};
-
-const MyIssuesButtonContent = ({ size = 'large', className, onOpen }: MyIssuesButtonProps & { onOpen: () => void }) => {
-    const usher = useUsher();
-    const [result] = MyIssues.use();
-
-    return <MyIssuesButtonView size={size} className={className} waiting={waitingCount(result.data ?? [])} labels={usher.labels} onOpen={onOpen} />;
-};
-
-/**
- * Props for {@link MyIssuesButtonView}.
- */
-export interface MyIssuesButtonViewProps extends MyIssuesButtonProps {
-    /** How many issues support waits for the user on. */
-    waiting: number;
-
-    /** The labels to show. */
-    labels: ReturnType<typeof useUsher>['labels'];
-
-    /** Opens the my issues side sheet. */
-    onOpen: () => void;
-}
-
-/**
- * Renders the my issues button for a given number of issues support waits for the user on.
- */
-export const MyIssuesButtonView = ({ size = 'large', className, waiting, labels, onOpen }: MyIssuesButtonViewProps) => {
-    const model = myIssuesButtonModel(size, waiting, labels);
-    const badge = waiting > 0 && (
-        <span className='usher-my-issues-button__badge' aria-hidden='true'>
-            <Badge value={waiting} severity='warn' size='small' />
-        </span>
-    );
-
-    return (
-        <span className={['usher-my-issues-button', className].filter(Boolean).join(' ')} data-size={size}>
-            {size === 'small'
-                ? <IconButton variant='ghost' icon={<InboxIcon />} aria-label={model.accessibleName} tooltip={model.tooltip} onClick={onOpen} />
-                : <Button variant='outline' icon={<InboxIcon />} label={model.text} aria-label={model.accessibleName} onClick={onOpen} />}
-            {badge}
-        </span>
-    );
-};

package/Buttons/ReportButton.tsx

@@ -1,51 +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 { Button, IconButton } from '@cratis/components/Common';
-import { BugIcon } from '../Icons.js';
-import { useUsher } from '../Provider/useUsher.js';
-import { reportButtonModel, UsherButtonSize } from './buttonModels.js';
-
-/**
- * Props for {@link ReportButton}.
- */
-export interface ReportButtonProps {
-    /** `large` shows the icon and the text; `small` shows the icon, with the text as tooltip and accessible name. Defaults to `large`. */
-    size?: UsherButtonSize;
-
-    /** The error to report: `ErrorDetails` from `@cratis/showrunner.usher`, or anything thrown. The button reports a problem described by hand when not given. */
-    error?: unknown;
-
-    /** Additional class name for the button. */
-    className?: string;
-}
-
-/**
- * Opens the report a problem dialog, or the report this error dialog when given an error, with where in the
- * application the button is.
- */
-export const ReportButton = ({ size = 'large', error, className }: ReportButtonProps) => {
-    const usher = useUsher();
-    const reportsError = error !== undefined;
-    const model = reportButtonModel(size, reportsError, usher.labels);
-    const report = () => reportsError ? usher.reportError(error) : usher.reportIssue();
-
-    return size === 'small'
-        ? (
-            <IconButton
-                className={className}
-                variant='ghost'
-                icon={<BugIcon />}
-                aria-label={model.accessibleName}
-                tooltip={model.tooltip}
-                onClick={report} />
-        )
-        : (
-            <Button
-                className={className}
-                variant='outline'
-                icon={<BugIcon />}
-                label={model.text}
-                onClick={report} />
-        );
-};

package/Buttons/buttonModels.ts

@@ -1,55 +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 { format, UsherLabels } from '../Labels/index.js';
-
-/**
- * The sizes of the Usher buttons: `large` shows the icon and the text; `small` shows the icon, with the text as the
- * tooltip and the accessible name.
- */
-export type UsherButtonSize = 'large' | 'small';
-
-/**
- * What an Usher button shows and announces.
- */
-export interface ButtonModel {
-    /** The visible text; empty for a small button. */
-    readonly text: string;
-
-    /** The accessible name. */
-    readonly accessibleName: string;
-
-    /** The tooltip; empty for a large button, whose text says it all. */
-    readonly tooltip: string;
-}
-
-/**
- * Gets what the report button shows and announces.
- * @param size The {@link UsherButtonSize}.
- * @param reportsError Whether the button reports an error rather than a problem described by hand.
- * @param labels The labels to show.
- * @returns The {@link ButtonModel}.
- */
-export function reportButtonModel(size: UsherButtonSize, reportsError: boolean, labels: UsherLabels): ButtonModel {
-    const label = reportsError ? labels.reportButton.reportError : labels.reportButton.reportProblem;
-    return modelFor(size, label, label);
-}
-
-/**
- * Gets what the my issues button shows and announces.
- * @param size The {@link UsherButtonSize}.
- * @param waiting How many issues support waits for the user on.
- * @param labels The labels to show.
- * @returns The {@link ButtonModel}.
- */
-export function myIssuesButtonModel(size: UsherButtonSize, waiting: number, labels: UsherLabels): ButtonModel {
-    const label = labels.myIssuesButton.label;
-    const accessibleName = waiting > 0 ? `${label}, ${format(labels.myIssuesButton.waiting, { count: waiting })}` : label;
-    return modelFor(size, label, accessibleName);
-}
-
-function modelFor(size: UsherButtonSize, label: string, accessibleName: string): ButtonModel {
-    return size === 'small'
-        ? { text: '', accessibleName, tooltip: accessibleName }
-        : { text: label, accessibleName, tooltip: '' };
-}

package/Buttons/index.ts

@@ -1,6 +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 './buttonModels.js';
-export * from './MyIssuesButton.js';
-export * from './ReportButton.js';

package/Correlation/CorrelationTracker.ts

@@ -1,51 +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 { Guid } from '@cratis/fundamentals';
-
-/**
- * Keeps the correlation ids of the last few Arc commands and queries, so a report can carry them.
- */
-export class CorrelationTracker {
-    private _correlationIds: Guid[] = [];
-
-    /**
-     * Initializes a new instance of {@link CorrelationTracker}.
-     * @param capacity How many correlation ids to keep; the oldest is dropped when one more is tracked.
-     */
-    constructor(readonly capacity: number = 5) {
-    }
-
-    /**
-     * Gets the correlation ids kept, oldest first.
-     */
-    get correlationIds(): Guid[] {
-        return [...this._correlationIds];
-    }
-
-    /**
-     * Tracks a correlation id. A correlation id already kept moves to the end instead of being kept twice; an
-     * empty one is ignored.
-     * @param correlationId The correlation id, as a {@link Guid} or its string form.
-     */
-    track(correlationId: Guid | string): void {
-        const parsed = typeof correlationId === 'string' ? parseGuid(correlationId) : correlationId;
-        if (!parsed || parsed.equals(Guid.empty)) {
-            return;
-        }
-
-        this._correlationIds = [...this._correlationIds.filter(existing => !existing.equals(parsed)), parsed]
-            .slice(-Math.max(this.capacity, 0));
-    }
-
-    /**
-     * Forgets every correlation id kept.
-     */
-    clear(): void {
-        this._correlationIds = [];
-    }
-}
-
-function parseGuid(value: string): Guid | undefined {
-    return Guid.isGuid(value) ? Guid.parse(value) : undefined;
-}

package/Correlation/index.ts

@@ -1,5 +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 './CorrelationTracker.js';
-export * from './withCorrelationIdHeader.js';

package/Correlation/withCorrelationIdHeader.ts

@@ -1,44 +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 { GetHttpHeaders } from '@cratis/arc';
-import { Guid } from '@cratis/fundamentals';
-import { CorrelationTracker } from './CorrelationTracker.js';
-
-/**
- * The HTTP header Arc reads the correlation id of a command or query from, unless the backend configures another.
- */
-export const defaultCorrelationIdHeader = 'X-Correlation-ID';
-
-/**
- * Wraps the HTTP headers callback Arc calls for every command and query request, so each request carries a
- * correlation id the tracker knows.
- * @remarks
- * Arc uses the correlation id a request carries in its correlation id header, so the id tracked is the id the
- * backend records for the command or query. A correlation id the headers already carry is kept and tracked;
- * otherwise a new one is added.
- * @param headersCallback The callback to wrap; nothing for none.
- * @param tracker The {@link CorrelationTracker} to track the correlation ids in.
- * @param header The name of the correlation id header.
- * @param createCorrelationId Creates a new correlation id.
- * @returns The wrapping callback.
- */
-export function withCorrelationIdHeader(
-    headersCallback: GetHttpHeaders | undefined,
-    tracker: CorrelationTracker,
-    header: string = defaultCorrelationIdHeader,
-    createCorrelationId: () => Guid = () => Guid.create()): GetHttpHeaders {
-    return () => {
-        const headers = new Headers(headersCallback?.() ?? {});
-        const existing = headers.get(header);
-        const correlationId = existing && Guid.isGuid(existing) ? existing : createCorrelationId().toString();
-        headers.set(header, correlationId);
-        tracker.track(correlationId);
-
-        const record: Record<string, string> = {};
-        headers.forEach((value, name) => {
-            record[name] = value;
-        });
-        return record;
-    };
-}

package/Icons.tsx

@@ -1,29 +0,0 @@
-// Copyright (c) Cratis. All rights reserved.
-// Licensed under the MIT license. See LICENSE file in the project root for full license information.
-
-/**
- * The bug icon of the report button. Decorative: the button carries the accessible name.
- */
-export const BugIcon = () => (
-    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
-        <path fill='currentColor' d='M20 8h-2.81a5.985 5.985 0 0 0-1.82-1.96L17 4.41 15.59 3l-2.17 2.17a6.002 6.002 0 0 0-2.83 0L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z' />
-    </svg>
-);
-
-/**
- * The inbox icon of the my issues button. Decorative: the button carries the accessible name.
- */
-export const InboxIcon = () => (
-    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
-        <path fill='currentColor' d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12h-4a3 3 0 0 1-6 0H5V5h14v10z' />
-    </svg>
-);
-
-/**
- * The back arrow of the issue view. Decorative: the button carries the accessible name.
- */
-export const BackIcon = () => (
-    <svg className='usher-icon' viewBox='0 0 24 24' width='1em' height='1em' aria-hidden='true' focusable='false'>
-        <path fill='currentColor' d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z' />
-    </svg>
-);

package/Issues/IssueView/AccessPanel.tsx

@@ -1,85 +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 { DialogButtons, DialogResult, useConfirmationDialog, useDialog } from '@cratis/arc.react/dialogs';
-import { Button } from '@cratis/components/Common';
-import { toastCommandResult } from '@cratis/components/Notifications';
-import { IssueConversation, IssueState, RevokeAccess } from '@cratis/showrunner.usher';
-import { useId, useState } from 'react';
-import { format } from '../../Labels/index.js';
-import { useUsherContext } from '../../Provider/UsherContext.js';
-import { formatTime } from '../../Reporting/AccessChoice.js';
-import { AccessStatus } from '../accessStatus.js';
-import { useAccessStatus } from '../useAccessStatus.js';
-import { GrantAccessDialog } from './GrantAccessDialog.js';
-import { SupportSessions } from './SupportSessions.js';
-
-/**
- * Props for {@link AccessPanel}.
- */
-export interface AccessPanelProps {
-    /** The issue. */
-    issue: IssueConversation;
-}
-
-/**
- * Shows whether support may sign in as the reporter, lets them grant or revoke it, highlights support's pending
- * request, and lists the sessions in which support signed in.
- */
-export const AccessPanel = ({ issue }: AccessPanelProps) => {
-    const { labels, locale } = useUsherContext();
-    const headingId = useId();
-    const [GrantDialog, showGrantDialog] = useDialog(GrantAccessDialog);
-    const [confirm] = useConfirmationDialog();
-    const [revokeAccess] = RevokeAccess.use();
-    const [requestDismissed, setRequestDismissed] = useState(false);
-    const [status] = useAccessStatus(issue.access);
-    const isWithdrawn = issue.state === IssueState.withdrawn;
-    const showsRequest = status === AccessStatus.requested && !requestDismissed && !isWithdrawn;
-    const validUntil = issue.access?.validUntil instanceof Date ? issue.access.validUntil : new Date(issue.access?.validUntil);
-
-    const heading = status === AccessStatus.granted
-        ? labels.accessPanel.grantedHeading
-        : showsRequest ? labels.accessPanel.requestedHeading : labels.accessPanel.notGrantedHeading;
-
-    const revoke = async () => {
-        const answer = await confirm(labels.accessPanel.revokeTitle, labels.accessPanel.revokeMessage, DialogButtons.YesNo);
-        if (answer !== DialogResult.Yes) {
-            return;
-        }
-
-        revokeAccess.issueId = issue.id;
-        toastCommandResult(await revokeAccess.execute(), { showSuccess: false });
-    };
-
-    const grant = () => void showGrantDialog({ issueId: issue.id });
-
-    return (
-        <section className='usher-panel' data-highlighted={showsRequest || undefined} aria-labelledby={headingId}>
-            <h4 id={headingId} className='usher-panel__heading'>{heading}</h4>
-            {status === AccessStatus.granted && (
-                <>
-                    <p className='usher-panel__text'>{format(labels.accessPanel.grantedUntil, { time: formatTime(validUntil, locale) })}</p>
-                    <Button variant='outline' tone='critical' size='small' label={labels.accessPanel.revoke} onClick={() => void revoke()} />
-                </>
-            )}
-            {showsRequest && (
-                <>
-                    <p className='usher-panel__text'>{format(labels.accessPanel.requestReason, { reason: issue.access.request.reason })}</p>
-                    <div className='usher-panel__actions'>
-                        <Button variant='solid' tone='accent' size='small' label={labels.accessPanel.grant} onClick={grant} />
-                        <Button variant='ghost' size='small' label={labels.accessPanel.notNow} onClick={() => setRequestDismissed(true)} />
-                    </div>
-                </>
-            )}
-            {status !== AccessStatus.granted && !showsRequest && (
-                <>
-                    <p className='usher-panel__text'>{labels.accessPanel.notGranted}</p>
-                    {!isWithdrawn && <Button variant='outline' size='small' label={labels.accessPanel.grant} onClick={grant} />}
-                </>
-            )}
-            <SupportSessions sessions={issue.access?.sessions ?? []} entries={issue.entries ?? []} />
-            <GrantDialog />
-        </section>
-    );
-};

package/Issues/IssueView/GrantAccessDialog.tsx

@@ -1,56 +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 { CommandDialog } from '@cratis/components/CommandDialog';
-import { DropdownField } from '@cratis/components/CommandForm';
-import { DialogInitialFocus } from '@cratis/components/Dialogs';
-import { Guid } from '@cratis/fundamentals';
-import { AccessDuration, GrantAccess } from '@cratis/showrunner.usher';
-import { useId, useState } from 'react';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { AccessNotice } from '../../Reporting/AccessNotice.js';
-import { durationOptions } from '../../Reporting/durationOptions.js';
-
-/**
- * Props for {@link GrantAccessDialog}.
- */
-export interface GrantAccessDialogProps {
-    /** The issue. */
-    issueId: Guid;
-}
-
-/**
- * Lets the reporter grant support access to sign in as them on an issue for a while, stating until when.
- */
-export const GrantAccessDialog = ({ issueId }: GrantAccessDialogProps) => {
-    const labels = useUsherLabels();
-    const noticeId = useId();
-    const [duration, setDuration] = useState(AccessDuration.oneDay);
-
-    return (
-        <CommandDialog<GrantAccess>
-            command={GrantAccess}
-            title={labels.accessPanel.grantTitle}
-            okLabel={labels.accessPanel.grantConfirm}
-            cancelLabel={labels.common.cancel}
-            closeAriaLabel={labels.common.close}
-            initialFocus={DialogInitialFocus.Content}
-            initialValues={{ issueId, accessDuration: AccessDuration.oneDay }}
-            onFieldChange={(_command, fieldName, _oldValue, newValue) => {
-                if (fieldName === 'accessDuration') {
-                    setDuration(Number(newValue) as AccessDuration);
-                }
-            }}>
-            <div className='usher-report-form'>
-                <DropdownField<GrantAccess>
-                    value={command => command.accessDuration}
-                    title={labels.access.duration}
-                    aria-describedby={noticeId}
-                    options={durationOptions(labels)}
-                    optionValue='value'
-                    optionLabel='label' />
-                <AccessNotice id={noticeId} duration={duration} />
-            </div>
-        </CommandDialog>
-    );
-};