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

package/Issues/IssueView/IdentityPanel.tsx

@@ -1,38 +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 { useDialog } from '@cratis/arc.react/dialogs';
-import { Button } from '@cratis/components/Common';
-import { IssueConversation, IssueState } from '@cratis/showrunner.usher';
-import { useId } from 'react';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { ShareIdentityDialog } from './ShareIdentityDialog.js';
-
-/**
- * Props for {@link IdentityPanel}.
- */
-export interface IdentityPanelProps {
-    /** The issue. */
-    issue: IssueConversation;
-}
-
-/**
- * Shows whether support knows who the reporter is, and lets them share it when it does not.
- */
-export const IdentityPanel = ({ issue }: IdentityPanelProps) => {
-    const labels = useUsherLabels();
-    const headingId = useId();
-    const [ShareDialog, showShareDialog] = useDialog(ShareIdentityDialog);
-    const canShare = !issue.identityShared && issue.state !== IssueState.withdrawn;
-
-    return (
-        <section className='usher-panel' aria-labelledby={headingId}>
-            <h4 id={headingId} className='usher-panel__heading'>{labels.identity.heading}</h4>
-            <p className='usher-panel__text'>{issue.identityShared ? labels.identity.known : labels.identity.unknown}</p>
-            {canShare && (
-                <Button variant='outline' size='small' label={labels.identity.share} onClick={() => void showShareDialog({ issueId: issue.id })} />
-            )}
-            <ShareDialog />
-        </section>
-    );
-};

package/Issues/IssueView/IssueActions.tsx

@@ -1,52 +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, WithdrawIssue } from '@cratis/showrunner.usher';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { isClosed } from '../issueStates.js';
-import { ReopenIssueDialog } from './ReopenIssueDialog.js';
-
-/**
- * Props for {@link IssueActions}.
- */
-export interface IssueActionsProps {
-    /** The issue. */
-    issue: IssueConversation;
-}
-
-/**
- * What the reporter can do with an issue: reopen it once resolved, and withdraw it while it is open.
- */
-export const IssueActions = ({ issue }: IssueActionsProps) => {
-    const labels = useUsherLabels();
-    const [ReopenDialog, showReopenDialog] = useDialog(ReopenIssueDialog);
-    const [confirm] = useConfirmationDialog();
-    const [withdrawIssue] = WithdrawIssue.use();
-    const canReopen = issue.state === IssueState.resolved;
-    const canWithdraw = !isClosed(issue.state);
-
-    const withdraw = async () => {
-        const answer = await confirm(labels.actions.withdrawTitle, labels.actions.withdrawMessage, DialogButtons.YesNo);
-        if (answer !== DialogResult.Yes) {
-            return;
-        }
-
-        withdrawIssue.issueId = issue.id;
-        toastCommandResult(await withdrawIssue.execute(), { showSuccess: false });
-    };
-
-    if (!canReopen && !canWithdraw) {
-        return null;
-    }
-
-    return (
-        <div className='usher-issue-actions'>
-            {canReopen && <Button variant='outline' size='small' label={labels.actions.reopen} onClick={() => void showReopenDialog({ issueId: issue.id })} />}
-            {canWithdraw && <Button variant='ghost' tone='critical' size='small' label={labels.actions.withdraw} onClick={() => void withdraw()} />}
-            <ReopenDialog />
-        </div>
-    );
-};

package/Issues/IssueView/IssueConversationPanel.tsx

@@ -1,89 +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 { ChatConversation } from '@cratis/components/Chat';
-import { Message, Tag } from '@cratis/components/Display';
-import { toastCommandResult } from '@cratis/components/Notifications';
-import { AddDetails, AnswerQuestion, ConversationEntryKind, IssueConversation, IssueState } from '@cratis/showrunner.usher';
-import { useMemo } from 'react';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { authorOf, ConversationMessage, conversationMessages, isOpenQuestion } from '../conversationMessages.js';
-
-/**
- * Props for {@link IssueConversationPanel}.
- */
-export interface IssueConversationPanelProps {
-    /** The issue. */
-    issue: IssueConversation;
-}
-
-/**
- * The conversation on an issue. A message the reporter sends answers support's open question, or adds details when
- * there is none. Once the reporter withdrew the issue, the composer is disabled: nothing more can be added to it.
- */
-export const IssueConversationPanel = ({ issue }: IssueConversationPanelProps) => {
-    const labels = useUsherLabels();
-    const [addDetails] = AddDetails.use();
-    const [answerQuestion] = AnswerQuestion.use();
-    const messages = useMemo(() => conversationMessages(issue.id, issue.entries ?? [], labels), [issue.id, issue.entries, labels]);
-    const openQuestionId = issue.openQuestion?.questionId;
-    const isWithdrawn = issue.state === IssueState.withdrawn;
-
-    const send = async (body: string) => {
-        if (isWithdrawn) {
-            return;
-        }
-
-        if (isOpenQuestion(openQuestionId)) {
-            answerQuestion.issueId = issue.id;
-            answerQuestion.questionId = openQuestionId;
-            answerQuestion.answer = body;
-            toastCommandResult(await answerQuestion.execute(), { showSuccess: false });
-            return;
-        }
-
-        addDetails.issueId = issue.id;
-        addDetails.details = body;
-        toastCommandResult(await addDetails.execute(), { showSuccess: false });
-    };
-
-    const renderMessageExtra = (message: ConversationMessage) => {
-        if (message.kind !== ConversationEntryKind.questionAsked) {
-            return undefined;
-        }
-
-        const isOpen = isOpenQuestion(openQuestionId) && openQuestionId.equals(message.questionId);
-        return (
-            <span className='usher-conversation__question-state'>
-                <Tag value={isOpen ? labels.issue.waitingForAnswer : labels.issue.answered} severity={isOpen ? 'warn' : 'success'} />
-            </span>
-        );
-    };
-
-    return (
-        <section className='usher-conversation' data-closed={isWithdrawn || undefined} aria-label={issue.title}>
-            <fieldset className='usher-conversation__fieldset' disabled={isWithdrawn}>
-                <ChatConversation<ConversationMessage>
-                    messages={messages}
-                    onSendMessage={body => void send(body)}
-                    authorOf={authorId => authorOf(authorId, labels)}
-                    renderMessageExtra={renderMessageExtra}
-                    quickReply={false}
-                    labels={{
-                        empty: labels.conversation.empty,
-                        timestamps: {
-                            justNow: labels.conversation.justNow,
-                            minutesAgo: labels.conversation.minutesAgo,
-                            hoursAgo: labels.conversation.hoursAgo
-                        },
-                        composer: {
-                            placeholder: isWithdrawn ? labels.issue.withdrawnPlaceholder : labels.issue.composerPlaceholder,
-                            send: labels.conversation.send,
-                            sendMessage: labels.conversation.send
-                        }
-                    }} />
-            </fieldset>
-            {isWithdrawn && <Message severity='secondary' text={labels.issue.withdrawnNotice} live={false} />}
-        </section>
-    );
-};

package/Issues/IssueView/IssueHeader.tsx

@@ -1,69 +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 } from '@cratis/components/Common';
-import { Tag } from '@cratis/components/Display';
-import { IssueConversation } from '@cratis/showrunner.usher';
-import { format } from '../../Labels/index.js';
-import { useUsherContext } from '../../Provider/UsherContext.js';
-import { formatTime } from '../../Reporting/AccessChoice.js';
-import { formatLocation } from '../../Reporting/formatLocation.js';
-import { BackIcon } from '../../Icons.js';
-import { stateBadgeFor } from '../issueStates.js';
-import { isFixReleased } from '../MyIssuesList.js';
-import { isWebAddress } from '../webAddress.js';
-
-/**
- * Props for {@link IssueHeader}.
- */
-export interface IssueHeaderProps {
-    /** The issue. */
-    issue: IssueConversation;
-
-    /** Goes back to the list of issues; no back button when not given. */
-    onBack?: () => void;
-}
-
-/**
- * The header of an issue: its title and state, when and where it was reported, and what it is linked to.
- */
-export const IssueHeader = ({ issue, onBack }: IssueHeaderProps) => {
-    const { labels, locale } = useUsherContext();
-    const badge = stateBadgeFor(issue.state, labels);
-    const reportedAt = issue.reportedAt instanceof Date ? issue.reportedAt : new Date(issue.reportedAt);
-    const location = formatLocation(issue.location, labels.common.locationSeparator, labels.common.unknownLocation);
-    const workItem = issue.workItem;
-    const hasWorkItem = (workItem?.reference ?? '').length > 0;
-
-    return (
-        <header className='usher-issue-header'>
-            {onBack && (
-                <Button variant='ghost' size='small' icon={<BackIcon />} onClick={onBack} label={labels.issue.back} />
-            )}
-            <div className='usher-issue-header__title-row'>
-                <h3 className='usher-issue-header__title'>{issue.title}</h3>
-                <Tag value={badge.label} severity={badge.severity} />
-            </div>
-            <p className='usher-issue-header__meta'>
-                {format(labels.issue.reported, { date: formatTime(reportedAt, locale) })} · {location}
-            </p>
-            {(issue.knownIssueTitle?.length > 0 || hasWorkItem) && (
-                <p className='usher-issue-header__links'>
-                    {issue.knownIssueTitle?.length > 0 && (
-                        <span>{labels.issue.knownIssue} <strong>{issue.knownIssueTitle}</strong></span>
-                    )}
-                    {hasWorkItem && (
-                        <span>
-                            {labels.issue.trackedIn}{' '}
-                            {isWebAddress(workItem.url)
-                                ? <a href={workItem.url} target='_blank' rel='noreferrer'>{workItem.reference}</a>
-                                : <strong>{workItem.reference}</strong>}
-                            {' · '}
-                            {isFixReleased(issue) ? format(labels.issue.fixedIn, { version: issue.fixedInVersion }) : labels.issue.notReleased}
-                        </span>
-                    )}
-                </p>
-            )}
-        </header>
-    );
-};

package/Issues/IssueView/IssueView.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 { Message } from '@cratis/components/Display';
-import { Guid } from '@cratis/fundamentals';
-import { ForIssue } from '@cratis/showrunner.usher';
-import { UsherBoundary } from '../../Provider/UsherBoundary.js';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { isOpenQuestion } from '../conversationMessages.js';
-import { AccessPanel } from './AccessPanel.js';
-import { IdentityPanel } from './IdentityPanel.js';
-import { IssueActions } from './IssueActions.js';
-import { IssueConversationPanel } from './IssueConversationPanel.js';
-import { IssueHeader } from './IssueHeader.js';
-import { QuestionBanner } from './QuestionBanner.js';
-import { StatusStrip } from './StatusStrip.js';
-
-/**
- * Props for {@link IssueView}.
- */
-export interface IssueViewProps {
-    /** The issue to show. */
-    issueId: Guid;
-
-    /** Goes back to the list of issues; no back button when not given. */
-    onBack?: () => void;
-}
-
-/**
- * One of the signed-in reporter's issues: its state, the conversation with support, who support knows the reporter
- * is, support's access, and what the reporter can do with it. It stays current as support works on the issue.
- * Usable on its own, such as on a page of the solution, or inside the my issues side sheet.
- */
-export const IssueView = (props: IssueViewProps) => (
-    <UsherBoundary>
-        <IssueViewContent {...props} />
-    </UsherBoundary>
-);
-
-const IssueViewContent = ({ issueId, onBack }: IssueViewProps) => {
-    const labels = useUsherLabels();
-    const [result] = ForIssue.use({ issueId });
-
-    // The query answers with the issue or with nothing: an issue the reporter did not report, or one support's session
-    // is not for, is never sent.
-    const issue = result.data?.[0];
-    const isLoaded = result.hasData && issue?.id !== undefined;
-
-    if (!isLoaded) {
-        return (
-            <div className='usher-issue-view'>
-                <Message severity={result.isPerforming ? 'info' : 'secondary'} text={result.isPerforming ? labels.issue.loading : labels.issue.notFound} />
-            </div>
-        );
-    }
-
-    const openQuestion = issue.openQuestion;
-
-    return (
-        <div className='usher-issue-view'>
-            <IssueHeader issue={issue} onBack={onBack} />
-            <StatusStrip state={issue.state} />
-            {isOpenQuestion(openQuestion?.questionId) && <QuestionBanner question={openQuestion.question} />}
-            <div className='usher-issue-view__body'>
-                <IssueConversationPanel issue={issue} />
-                <aside className='usher-issue-view__side'>
-                    <IdentityPanel issue={issue} />
-                    <AccessPanel issue={issue} />
-                    <IssueActions issue={issue} />
-                </aside>
-            </div>
-        </div>
-    );
-};

package/Issues/IssueView/QuestionBanner.tsx

@@ -1,27 +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 { format } from '../../Labels/index.js';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-
-/**
- * Props for {@link QuestionBanner}.
- */
-export interface QuestionBannerProps {
-    /** What support asked. */
-    question: string;
-}
-
-/**
- * Tells the reporter that support waits for an answer, and that their next message answers it.
- */
-export const QuestionBanner = ({ question }: QuestionBannerProps) => {
-    const labels = useUsherLabels();
-
-    return (
-        <div className='usher-question-banner'>
-            <Message severity='warn' text={format(labels.issue.questionBanner, { question })} />
-        </div>
-    );
-};

package/Issues/IssueView/ReopenIssueDialog.tsx

@@ -1,37 +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 { TextAreaField } from '@cratis/components/CommandForm';
-import { DialogInitialFocus } from '@cratis/components/Dialogs';
-import { Guid } from '@cratis/fundamentals';
-import { ReopenIssue } from '@cratis/showrunner.usher';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-
-/**
- * Props for {@link ReopenIssueDialog}.
- */
-export interface ReopenIssueDialogProps {
-    /** The issue. */
-    issueId: Guid;
-}
-
-/**
- * Lets the reporter reopen a resolved issue, saying why it is not fixed.
- */
-export const ReopenIssueDialog = ({ issueId }: ReopenIssueDialogProps) => {
-    const labels = useUsherLabels();
-
-    return (
-        <CommandDialog<ReopenIssue>
-            command={ReopenIssue}
-            title={labels.actions.reopenTitle}
-            okLabel={labels.actions.reopen}
-            cancelLabel={labels.common.cancel}
-            closeAriaLabel={labels.common.close}
-            initialFocus={DialogInitialFocus.Content}
-            initialValues={{ issueId, reason: '' }}>
-            <TextAreaField<ReopenIssue> value={command => command.reason} title={labels.actions.reopenReason} rows={4} />
-        </CommandDialog>
-    );
-};

package/Issues/IssueView/ShareIdentityDialog.tsx

@@ -1,37 +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 { DialogInitialFocus } from '@cratis/components/Dialogs';
-import { Guid } from '@cratis/fundamentals';
-import { ShareIdentity } from '@cratis/showrunner.usher';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-
-/**
- * Props for {@link ShareIdentityDialog}.
- */
-export interface ShareIdentityDialogProps {
-    /** The issue. */
-    issueId: Guid;
-}
-
-/**
- * Asks the reporter to confirm that support may know who they are on an issue. Sharing cannot be undone, so the
- * dialog opens with focus on cancel.
- */
-export const ShareIdentityDialog = ({ issueId }: ShareIdentityDialogProps) => {
-    const labels = useUsherLabels();
-
-    return (
-        <CommandDialog<ShareIdentity>
-            command={ShareIdentity}
-            title={labels.identity.shareTitle}
-            okLabel={labels.identity.shareConfirm}
-            cancelLabel={labels.common.cancel}
-            closeAriaLabel={labels.common.close}
-            initialFocus={DialogInitialFocus.Cancel}
-            initialValues={{ issueId }}>
-            <p className='usher-dialog-text'>{labels.identity.shareDescription}</p>
-        </CommandDialog>
-    );
-};

package/Issues/IssueView/StatusStrip.tsx

@@ -1,42 +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 { IssueState } from '@cratis/showrunner.usher';
-import { useUsherLabels } from '../../Provider/UsherContext.js';
-import { stateBadgeFor, statusStepOf, statusSteps } from '../issueStates.js';
-
-/**
- * Props for {@link StatusStrip}.
- */
-export interface StatusStripProps {
-    /** The state the issue is in. */
-    state: IssueState;
-}
-
-/**
- * Shows how far along an issue is, from reported to resolved. The step reached is marked as the current step.
- */
-export const StatusStrip = ({ state }: StatusStripProps) => {
-    const labels = useUsherLabels();
-    const reached = statusStepOf(state);
-    const closedOtherwise = state === IssueState.wontFix || state === IssueState.withdrawn;
-
-    return (
-        <ol className='usher-status-strip'>
-            {statusSteps.map((step, index) => {
-                const isCurrent = index === reached;
-                const label = isCurrent && closedOtherwise ? stateBadgeFor(state, labels).label : stateBadgeFor(step, labels).label;
-                return (
-                    <li
-                        key={step}
-                        className='usher-status-strip__step'
-                        data-reached={index <= reached || undefined}
-                        data-current={isCurrent || undefined}
-                        aria-current={isCurrent ? 'step' : undefined}>
-                        {label}
-                    </li>
-                );
-            })}
-        </ol>
-    );
-};

package/Issues/IssueView/SupportSessions.tsx

@@ -1,59 +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 { ConversationEntry, SupportSession } from '@cratis/showrunner.usher';
-import { format } from '../../Labels/index.js';
-import { useUsherContext } from '../../Provider/UsherContext.js';
-import { formatClock, formatTime } from '../../Reporting/AccessChoice.js';
-import { isSessionRunning } from '../accessStatus.js';
-import { sessionActivityOf } from '../sessionActivity.js';
-
-/**
- * Props for {@link SupportSessions}.
- */
-export interface SupportSessionsProps {
-    /** The sessions, oldest first. */
-    sessions: SupportSession[];
-
-    /** The entries of the conversation, to show what support did in each session. */
-    entries: ConversationEntry[];
-}
-
-/**
- * Lists the sessions in which support signed in as the reporter, each with what support did as the reporter in it.
- */
-export const SupportSessions = ({ sessions, entries }: SupportSessionsProps) => {
-    const { labels, locale } = useUsherContext();
-
-    if (sessions.length === 0) {
-        return <p className='usher-panel__text usher-panel__text--secondary'>{labels.accessPanel.noSessions}</p>;
-    }
-
-    return (
-        <div className='usher-sessions'>
-            <span className='usher-sessions__heading'>{labels.accessPanel.sessionsHeading}</span>
-            <ul className='usher-sessions__list'>
-                {sessions.map(session => {
-                    const start = formatTime(asDate(session.startedAt), locale);
-                    const end = isSessionRunning(session) ? labels.accessPanel.sessionRunning : formatClock(asDate(session.endedAt), locale);
-                    const name = (session.author?.name ?? '').length > 0 ? session.author.name : labels.conversation.support;
-                    const activity = sessionActivityOf(session, entries, labels.accessPanel.sessionActions);
-                    return (
-                        <li key={session.sessionId.toString()}>
-                            {format(labels.accessPanel.session, { name, start, end })}
-                            {activity.length > 0
-                                ? (
-                                    <ul className='usher-sessions__activity'>
-                                        {activity.map(action => <li key={action.entryId}>{action.text}</li>)}
-                                    </ul>
-                                )
-                                : <p className='usher-sessions__activity usher-panel__text--secondary'>{labels.accessPanel.sessionDidNothing}</p>}
-                        </li>
-                    );
-                })}
-            </ul>
-        </div>
-    );
-};
-
-const asDate = (value: Date | string) => value instanceof Date ? value : new Date(value);

package/Issues/IssueView/index.ts

@@ -1,15 +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 './AccessPanel.js';
-export * from './GrantAccessDialog.js';
-export * from './IdentityPanel.js';
-export * from './IssueActions.js';
-export * from './IssueConversationPanel.js';
-export * from './IssueHeader.js';
-export * from './IssueView.js';
-export * from './QuestionBanner.js';
-export * from './ReopenIssueDialog.js';
-export * from './ShareIdentityDialog.js';
-export * from './StatusStrip.js';
-export * from './SupportSessions.js';

package/Issues/MyIssues/IssueList.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 { Column, DataTableFilterMatchMode, DataTableForObservableQuery } from '@cratis/components/DataTables';
-import { Tag } from '@cratis/components/Display';
-import { IssueKind, MyIssues, ReportedIssue } from '@cratis/showrunner.usher';
-import { format } from '../../Labels/index.js';
-import { useUsherContext } from '../../Provider/UsherContext.js';
-import { formatTime } from '../../Reporting/AccessChoice.js';
-import { isClosed, stateBadgeFor, statusSteps } from '../issueStates.js';
-import { isFixReleased } from '../MyIssuesList.js';
-
-/**
- * Props for {@link IssueList}.
- */
-export interface IssueListProps {
-    /** Whether to list closed issues too. */
-    showClosed: boolean;
-
-    /** Opens an issue. */
-    onOpen: (issue: ReportedIssue) => void;
-}
-
-const openStates = statusSteps.filter(state => !isClosed(state));
-
-/**
- * The signed-in reporter's issues, most recent activity first, as they change.
- */
-export const IssueList = ({ showClosed, onOpen }: IssueListProps) => {
-    const { labels, locale } = useUsherContext();
-
-    return (
-        <DataTableForObservableQuery<MyIssues, ReportedIssue, object>
-            key={showClosed ? 'all' : 'open'}
-            query={MyIssues}
-            dataKey='id'
-            emptyMessage={labels.myIssues.empty}
-            filteredEmptyMessage={labels.myIssues.noOpenIssues}
-            loadingMessage={labels.myIssues.loading}
-            failureMessage={labels.myIssues.failed}
-            unauthorizedMessage={labels.myIssues.unauthorized}
-            defaultFilters={showClosed ? {} : { state: { value: openStates, matchMode: DataTableFilterMatchMode.In } }}
-            selectionMode='single'
-            selection={null}
-            onSelectionChange={event => {
-                if (event.value) {
-                    onOpen(event.value);
-                }
-            }}>
-            <Column<ReportedIssue>
-                field='title'
-                header={labels.myIssues.issueColumn}
-                body={issue => (
-                    <span className='usher-issue-list__title'>
-                        <span>{issue.title}</span>
-                        <span className='usher-issue-list__kind'>{issue.kind === IssueKind.error ? labels.myIssues.errorKind : labels.myIssues.manualKind}</span>
-                    </span>
-                )} />
-            <Column<ReportedIssue>
-                field='state'
-                header={labels.myIssues.stateColumn}
-                body={issue => {
-                    const badge = stateBadgeFor(issue.state, labels);
-                    return (
-                        <span className='usher-issue-list__state'>
-                            <Tag value={badge.label} severity={badge.severity} />
-                            {issue.waitingOnReporter && <Tag value={labels.myIssues.waitingForYou} severity='warn' />}
-                            {isFixReleased(issue) && <Tag value={format(labels.myIssues.fixedIn, { version: issue.fixedInVersion })} severity='success' />}
-                        </span>
-                    );
-                }} />
-            <Column<ReportedIssue>
-                field='lastActivityAt'
-                header={labels.myIssues.lastActivityColumn}
-                body={issue => formatTime(issue.lastActivityAt instanceof Date ? issue.lastActivityAt : new Date(issue.lastActivityAt), locale)} />
-        </DataTableForObservableQuery>
-    );
-};