feat(i18n): expand catalog runtime and developer tooling
- add Intl-backed locale definitions, formatters, catalog loaders, and runtime hooks\n- compile hashed production catalogs from package-scoped catalog sources\n- drive Lingui extraction and compilation directly from project JSON config\n- redesign the devtool with localized controls, draggable persistence, settings, navigation, copy actions, ANSI output, and fullscreen support\n- extend repository APIs, CLI coverage, documentation, and runtime tests
This commit is contained in:
Maofeng
@@ -1,17 +1,40 @@
|
||||
import * as React from "react"
|
||||
import {
|
||||
CircleAlertIcon,
|
||||
CheckIcon,
|
||||
FileCode2Icon,
|
||||
RotateCcwIcon,
|
||||
SaveIcon,
|
||||
SearchIcon,
|
||||
} from "lucide-react"
|
||||
|
||||
import { useDevtoolLocalization } from "./devtool-localization"
|
||||
import { formatMessageOrigin, MessageCopyMenu } from "./message-copy-menu"
|
||||
import {
|
||||
createMessageNavigationModel,
|
||||
MessageNavigation,
|
||||
} from "./message-navigation"
|
||||
import { useOptionalMessageRepository } from "./message-repository"
|
||||
import type { DevtoolMessage, MessageRepository } from "./types"
|
||||
import type {
|
||||
DevtoolMessage,
|
||||
DevtoolMessagePackage,
|
||||
MessageRepository,
|
||||
} from "./types"
|
||||
import "./message-panel.css"
|
||||
|
||||
type LoadState =
|
||||
| { status: "loading" }
|
||||
| { error: Error; status: "error" }
|
||||
| { messages: readonly DevtoolMessage[]; status: "ready" }
|
||||
| {
|
||||
messages: readonly DevtoolMessage[]
|
||||
packages: readonly DevtoolMessagePackage[]
|
||||
status: "ready"
|
||||
}
|
||||
|
||||
export interface MessagePanelProps {
|
||||
className?: string
|
||||
locale: string
|
||||
refreshToken?: unknown
|
||||
repository?: MessageRepository
|
||||
}
|
||||
|
||||
@@ -20,6 +43,7 @@ function getMessageSearchText(message: DevtoolMessage) {
|
||||
message.id,
|
||||
message.source,
|
||||
message.translation,
|
||||
message.packageName,
|
||||
...message.comments,
|
||||
...message.origins.map((origin) => origin.file),
|
||||
]
|
||||
@@ -36,14 +60,23 @@ function MessageEditor({
|
||||
message: DevtoolMessage
|
||||
onSave: (translation: string) => Promise<void>
|
||||
}) {
|
||||
const { messages } = useDevtoolLocalization()
|
||||
const [translation, setTranslation] = React.useState(message.translation)
|
||||
const [saveState, setSaveState] = React.useState<
|
||||
"idle" | "saving" | "saved" | "error"
|
||||
>("idle")
|
||||
const repositoryTranslationRef = React.useRef(message.translation)
|
||||
const submittedTranslationRef = React.useRef<string | undefined>(undefined)
|
||||
const isEditable = message.editable
|
||||
const isDirty = translation !== message.translation
|
||||
const primaryOrigin = message.origins[0]
|
||||
|
||||
React.useEffect(() => {
|
||||
if (repositoryTranslationRef.current === message.translation) {
|
||||
return
|
||||
}
|
||||
|
||||
repositoryTranslationRef.current = message.translation
|
||||
setTranslation(message.translation)
|
||||
|
||||
if (submittedTranslationRef.current === message.translation) {
|
||||
@@ -54,8 +87,17 @@ function MessageEditor({
|
||||
setSaveState("idle")
|
||||
}, [message.translation])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (saveState !== "saved") {
|
||||
return
|
||||
}
|
||||
|
||||
const timeout = window.setTimeout(() => setSaveState("idle"), 1600)
|
||||
return () => window.clearTimeout(timeout)
|
||||
}, [saveState])
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!isDirty || saveState === "saving") {
|
||||
if (!isEditable || !isDirty || saveState === "saving") {
|
||||
return
|
||||
}
|
||||
|
||||
@@ -71,69 +113,152 @@ function MessageEditor({
|
||||
}
|
||||
}
|
||||
|
||||
const handleReset = () => {
|
||||
submittedTranslationRef.current = undefined
|
||||
setTranslation(message.translation)
|
||||
setSaveState("idle")
|
||||
}
|
||||
|
||||
return (
|
||||
<article
|
||||
className="i18n-message"
|
||||
data-dirty={isDirty || undefined}
|
||||
data-missing={message.missing || undefined}
|
||||
data-obsolete={message.obsolete || undefined}
|
||||
data-readonly={!isEditable || undefined}
|
||||
data-save-state={saveState}
|
||||
>
|
||||
<header className="i18n-message__header">
|
||||
<code className="i18n-message__id">{message.id}</code>
|
||||
<span className="i18n-message__catalog">{message.catalog}</span>
|
||||
<header className="i18n-message__source-toolbar">
|
||||
<div
|
||||
className="i18n-message__source-location"
|
||||
title={
|
||||
primaryOrigin
|
||||
? `${primaryOrigin.file}${primaryOrigin.line ? `:${primaryOrigin.line}` : ""}`
|
||||
: messages.messagePanel.unknownSourceLocation
|
||||
}
|
||||
>
|
||||
<FileCode2Icon aria-hidden="true" />
|
||||
<code>
|
||||
{primaryOrigin
|
||||
? formatMessageOrigin(primaryOrigin)
|
||||
: messages.messagePanel.unknownSourceLocation}
|
||||
</code>
|
||||
{message.origins.length > 1 && (
|
||||
<span
|
||||
aria-label={messages.messagePanel.additionalSourceLocations(
|
||||
message.origins.length - 1
|
||||
)}
|
||||
className="i18n-message__source-count"
|
||||
>
|
||||
+{message.origins.length - 1}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<MessageCopyMenu message={message} translation={translation} />
|
||||
</header>
|
||||
|
||||
<div className="i18n-message__source">
|
||||
<span className="i18n-message__label">Source</span>
|
||||
<p>{message.source || message.id}</p>
|
||||
<div className="i18n-message__header">
|
||||
<code className="i18n-message__id">{message.id}</code>
|
||||
</div>
|
||||
|
||||
<label className="i18n-message__field">
|
||||
<span className="i18n-message__label">{locale}</span>
|
||||
<textarea
|
||||
aria-label={`${message.id} translation for ${locale}`}
|
||||
value={translation}
|
||||
onChange={(event) => {
|
||||
submittedTranslationRef.current = undefined
|
||||
setTranslation(event.target.value)
|
||||
setSaveState("idle")
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
|
||||
event.preventDefault()
|
||||
void handleSave()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<div className="i18n-message__content">
|
||||
<div className="i18n-message__source">
|
||||
<span className="i18n-message__label">
|
||||
{messages.messagePanel.source}
|
||||
<code>{message.sourceLocale}</code>
|
||||
</span>
|
||||
<p dir="auto" lang={message.sourceLocale}>
|
||||
{message.source || message.id}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(message.comments.length > 0 || message.origins.length > 0) && (
|
||||
<label className="i18n-message__field">
|
||||
<span className="i18n-message__label">
|
||||
{messages.messagePanel.translation}
|
||||
<code>{locale}</code>
|
||||
</span>
|
||||
<textarea
|
||||
aria-label={messages.messagePanel.translationFor(
|
||||
message.id,
|
||||
locale
|
||||
)}
|
||||
dir="auto"
|
||||
lang={locale}
|
||||
rows={1}
|
||||
readOnly={!isEditable}
|
||||
value={translation}
|
||||
onChange={(event) => {
|
||||
if (!isEditable) {
|
||||
return
|
||||
}
|
||||
|
||||
submittedTranslationRef.current = undefined
|
||||
setTranslation(event.target.value)
|
||||
setSaveState("idle")
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (
|
||||
isEditable &&
|
||||
(event.metaKey || event.ctrlKey) &&
|
||||
event.key === "Enter"
|
||||
) {
|
||||
event.preventDefault()
|
||||
void handleSave()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{message.comments.length > 0 && (
|
||||
<footer className="i18n-message__meta">
|
||||
{message.comments.map((comment) => (
|
||||
<span key={comment}>{comment}</span>
|
||||
))}
|
||||
{message.origins.map((origin) => (
|
||||
<span key={`${origin.file}:${origin.line ?? ""}`}>
|
||||
{origin.file}
|
||||
{origin.line ? `:${origin.line}` : ""}
|
||||
</span>
|
||||
))}
|
||||
</footer>
|
||||
)}
|
||||
|
||||
<div className="i18n-message__actions">
|
||||
<span aria-live="polite" className="i18n-message__status">
|
||||
{saveState === "saving" && "Saving…"}
|
||||
{saveState === "saved" && "Saved"}
|
||||
{saveState === "error" && "Could not save"}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!isDirty || saveState === "saving"}
|
||||
onClick={() => void handleSave()}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
{(isDirty || saveState !== "idle") && (
|
||||
<div className="i18n-message__actions">
|
||||
<span
|
||||
aria-live="polite"
|
||||
className="i18n-message__status"
|
||||
data-state={saveState}
|
||||
>
|
||||
{saveState === "saved" && (
|
||||
<>
|
||||
<CheckIcon aria-hidden="true" />
|
||||
{messages.messagePanel.saved}
|
||||
</>
|
||||
)}
|
||||
{saveState === "error" && (
|
||||
<>
|
||||
<CircleAlertIcon aria-hidden="true" />
|
||||
{messages.messagePanel.couldNotSave}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
{isDirty && (
|
||||
<>
|
||||
<button type="button" onClick={handleReset}>
|
||||
<RotateCcwIcon aria-hidden="true" />
|
||||
{messages.messagePanel.reset}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="i18n-message__save"
|
||||
disabled={saveState === "saving"}
|
||||
onClick={() => void handleSave()}
|
||||
>
|
||||
<SaveIcon aria-hidden="true" />
|
||||
{saveState === "saving"
|
||||
? messages.messagePanel.saving
|
||||
: messages.messagePanel.save}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
)
|
||||
}
|
||||
@@ -141,57 +266,82 @@ function MessageEditor({
|
||||
export function MessagePanel({
|
||||
className,
|
||||
locale,
|
||||
refreshToken,
|
||||
repository: repositoryProp,
|
||||
}: MessagePanelProps) {
|
||||
const repositoryFromContext = useOptionalMessageRepository()
|
||||
const repository = repositoryProp ?? repositoryFromContext
|
||||
const { messages } = useDevtoolLocalization()
|
||||
const [state, setState] = React.useState<LoadState>({ status: "loading" })
|
||||
const [query, setQuery] = React.useState("")
|
||||
const [missingOnly, setMissingOnly] = React.useState(false)
|
||||
const [selectedNavigationKey, setSelectedNavigationKey] =
|
||||
React.useState<string>()
|
||||
const [openedNavigationKeys, setOpenedNavigationKeys] = React.useState<
|
||||
readonly string[]
|
||||
>([])
|
||||
const loadRequestRef = React.useRef(0)
|
||||
const previousLoadContextRef = React.useRef<{
|
||||
locale: string
|
||||
repository: MessageRepository | null
|
||||
} | null>(null)
|
||||
|
||||
const loadMessages = React.useCallback(async () => {
|
||||
const requestId = loadRequestRef.current + 1
|
||||
loadRequestRef.current = requestId
|
||||
const loadMessages = React.useCallback(
|
||||
async ({ preserveContent = false } = {}) => {
|
||||
const requestId = loadRequestRef.current + 1
|
||||
loadRequestRef.current = requestId
|
||||
|
||||
if (!repository) {
|
||||
setState({
|
||||
error: new Error(
|
||||
"MessagePanel requires a MessageRepositoryProvider or a repository prop."
|
||||
),
|
||||
status: "error",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setState({ status: "loading" })
|
||||
|
||||
try {
|
||||
const messages = await repository.getMessages(locale)
|
||||
|
||||
if (requestId !== loadRequestRef.current) {
|
||||
if (!repository) {
|
||||
setState({
|
||||
error: new Error(
|
||||
"MessagePanel requires a MessageRepositoryProvider or a repository prop."
|
||||
),
|
||||
status: "error",
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setState({ messages, status: "ready" })
|
||||
} catch (error) {
|
||||
if (requestId !== loadRequestRef.current) {
|
||||
return
|
||||
if (!preserveContent) {
|
||||
setState({ status: "loading" })
|
||||
}
|
||||
|
||||
setState({
|
||||
error:
|
||||
error instanceof Error
|
||||
? error
|
||||
: new Error("Unable to load messages."),
|
||||
status: "error",
|
||||
})
|
||||
}
|
||||
}, [locale, repository])
|
||||
try {
|
||||
const [loadedMessages, packages] = await Promise.all([
|
||||
repository.getMessages(locale),
|
||||
repository.getPackages?.() ?? Promise.resolve([]),
|
||||
])
|
||||
|
||||
if (requestId !== loadRequestRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
setState({ messages: loadedMessages, packages, status: "ready" })
|
||||
} catch (error) {
|
||||
if (requestId !== loadRequestRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
setState({
|
||||
error:
|
||||
error instanceof Error
|
||||
? error
|
||||
: new Error("Unable to load messages."),
|
||||
status: "error",
|
||||
})
|
||||
}
|
||||
},
|
||||
[locale, repository]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
void loadMessages()
|
||||
}, [loadMessages])
|
||||
const previousLoadContext = previousLoadContextRef.current
|
||||
const preserveContent =
|
||||
previousLoadContext?.locale === locale &&
|
||||
previousLoadContext.repository === repository
|
||||
|
||||
previousLoadContextRef.current = { locale, repository }
|
||||
void loadMessages({ preserveContent })
|
||||
}, [loadMessages, locale, refreshToken, repository])
|
||||
|
||||
const visibleMessages = React.useMemo(() => {
|
||||
if (state.status !== "ready") {
|
||||
@@ -211,6 +361,92 @@ export function MessagePanel({
|
||||
)
|
||||
})
|
||||
}, [missingOnly, query, state])
|
||||
const visiblePackageGroups = React.useMemo(() => {
|
||||
const groups = new Map<
|
||||
string,
|
||||
{
|
||||
kind: DevtoolMessagePackage["kind"]
|
||||
messages: DevtoolMessage[]
|
||||
}
|
||||
>()
|
||||
|
||||
if (state.status === "ready" && query.trim().length === 0 && !missingOnly) {
|
||||
for (const packageDefinition of state.packages) {
|
||||
groups.set(packageDefinition.name, {
|
||||
kind: packageDefinition.kind,
|
||||
messages: [],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
for (const message of visibleMessages) {
|
||||
const group = groups.get(message.packageName)
|
||||
|
||||
if (group) {
|
||||
group.messages.push(message)
|
||||
} else {
|
||||
groups.set(message.packageName, {
|
||||
kind: "dependency",
|
||||
messages: [message],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(groups, ([packageName, group]) => ({
|
||||
kind: group.kind,
|
||||
messages: group.messages,
|
||||
missingCount: group.messages.filter((message) => message.missing).length,
|
||||
packageName,
|
||||
})).sort(
|
||||
(left, right) =>
|
||||
Number(right.kind === "application") -
|
||||
Number(left.kind === "application") ||
|
||||
left.packageName.localeCompare(right.packageName)
|
||||
)
|
||||
}, [missingOnly, query, state, visibleMessages])
|
||||
const navigationModel = React.useMemo(
|
||||
() => createMessageNavigationModel(visiblePackageGroups),
|
||||
[visiblePackageGroups]
|
||||
)
|
||||
const navigationSelections = React.useMemo(
|
||||
() => Array.from(navigationModel.selections.values()),
|
||||
[navigationModel]
|
||||
)
|
||||
const activeSelection =
|
||||
(selectedNavigationKey
|
||||
? navigationModel.selections.get(selectedNavigationKey)
|
||||
: undefined) ??
|
||||
navigationSelections.find((selection) => selection.messages.length > 0) ??
|
||||
navigationSelections[0]
|
||||
const activeNavigationKey = activeSelection?.key
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!activeNavigationKey) {
|
||||
return
|
||||
}
|
||||
|
||||
setOpenedNavigationKeys((current) =>
|
||||
current.includes(activeNavigationKey)
|
||||
? current
|
||||
: [...current, activeNavigationKey]
|
||||
)
|
||||
}, [activeNavigationKey])
|
||||
|
||||
const openedSelections = React.useMemo(() => {
|
||||
const activeKeys =
|
||||
activeNavigationKey && !openedNavigationKeys.includes(activeNavigationKey)
|
||||
? [...openedNavigationKeys, activeNavigationKey]
|
||||
: openedNavigationKeys
|
||||
|
||||
return activeKeys.flatMap((key) => {
|
||||
const selection = navigationModel.selections.get(key)
|
||||
return selection ? [selection] : []
|
||||
})
|
||||
}, [activeNavigationKey, navigationModel, openedNavigationKeys])
|
||||
const missingMessageCount =
|
||||
state.status === "ready"
|
||||
? state.messages.filter((message) => message.missing).length
|
||||
: 0
|
||||
|
||||
const updateMessage = React.useCallback(
|
||||
async (message: DevtoolMessage, translation: string) => {
|
||||
@@ -218,6 +454,10 @@ export function MessagePanel({
|
||||
throw new Error("No message repository is available.")
|
||||
}
|
||||
|
||||
if (!message.editable) {
|
||||
throw new Error("This source message is read-only.")
|
||||
}
|
||||
|
||||
const updatedMessage = await repository.updateMessage({
|
||||
catalog: message.catalog,
|
||||
id: message.id,
|
||||
@@ -237,6 +477,7 @@ export function MessagePanel({
|
||||
? updatedMessage
|
||||
: item
|
||||
),
|
||||
packages: current.packages,
|
||||
status: "ready",
|
||||
}
|
||||
})
|
||||
@@ -247,18 +488,39 @@ export function MessagePanel({
|
||||
const rootClassName = ["i18n-message-panel", className]
|
||||
.filter(Boolean)
|
||||
.join(" ")
|
||||
const emptyStateMessage =
|
||||
state.status !== "ready" || visibleMessages.length > 0
|
||||
? undefined
|
||||
: state.messages.length === 0
|
||||
? messages.messagePanel.emptyCatalog
|
||||
: query.trim().length > 0
|
||||
? messages.messagePanel.noSearchResults
|
||||
: missingOnly
|
||||
? messages.messagePanel.noMissingMessages
|
||||
: messages.messagePanel.noMatches
|
||||
|
||||
return (
|
||||
<section className={rootClassName}>
|
||||
<header className="i18n-message-panel__toolbar">
|
||||
<label className="i18n-message-panel__search">
|
||||
<span className="i18n-visually-hidden">Search messages</span>
|
||||
<span className="i18n-visually-hidden">
|
||||
{messages.messagePanel.search}
|
||||
</span>
|
||||
<SearchIcon aria-hidden="true" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search messages"
|
||||
placeholder={messages.messagePanel.search}
|
||||
value={query}
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
/>
|
||||
{state.status === "ready" && (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="i18n-message-panel__result-count"
|
||||
>
|
||||
{visibleMessages.length}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
<label className="i18n-message-panel__toggle">
|
||||
<input
|
||||
@@ -266,40 +528,83 @@ export function MessagePanel({
|
||||
checked={missingOnly}
|
||||
onChange={(event) => setMissingOnly(event.target.checked)}
|
||||
/>
|
||||
Missing only
|
||||
<span aria-hidden="true" className="i18n-message-panel__checkbox">
|
||||
<CheckIcon />
|
||||
</span>
|
||||
<span>{messages.messagePanel.missingOnly}</span>
|
||||
{state.status === "ready" && (
|
||||
<span aria-hidden="true" className="i18n-message-panel__count">
|
||||
{missingMessageCount}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
{state.status === "ready" && (
|
||||
<output className="i18n-message-panel__count">
|
||||
{visibleMessages.length} / {state.messages.length}
|
||||
</output>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{state.status === "loading" ? (
|
||||
<div className="i18n-message-panel__state" role="status">
|
||||
Loading {locale}…
|
||||
{messages.messagePanel.loading(locale)}
|
||||
</div>
|
||||
) : state.status === "error" ? (
|
||||
<div className="i18n-message-panel__state" role="alert">
|
||||
<p>{state.error.message}</p>
|
||||
<button type="button" onClick={() => void loadMessages()}>
|
||||
Retry
|
||||
{messages.messagePanel.retry}
|
||||
</button>
|
||||
</div>
|
||||
) : visibleMessages.length === 0 ? (
|
||||
<div className="i18n-message-panel__state">
|
||||
No messages match the current filters.
|
||||
</div>
|
||||
) : visiblePackageGroups.length === 0 ? (
|
||||
<div className="i18n-message-panel__state">{emptyStateMessage}</div>
|
||||
) : (
|
||||
<div className="i18n-message-panel__list">
|
||||
{visibleMessages.map((message) => (
|
||||
<MessageEditor
|
||||
key={`${message.catalog}:${message.id}`}
|
||||
locale={locale}
|
||||
message={message}
|
||||
onSave={(translation) => updateMessage(message, translation)}
|
||||
/>
|
||||
))}
|
||||
<div className="i18n-message-workspace">
|
||||
<MessageNavigation
|
||||
model={navigationModel}
|
||||
selectedKey={activeNavigationKey}
|
||||
onSelect={setSelectedNavigationKey}
|
||||
/>
|
||||
<section
|
||||
aria-label={messages.messagePanel.messageEditor}
|
||||
className="i18n-message-workspace__editor"
|
||||
>
|
||||
{activeSelection ? (
|
||||
openedSelections.map((selection) => {
|
||||
return (
|
||||
<React.Activity
|
||||
key={selection.key}
|
||||
mode={
|
||||
selection.key === activeNavigationKey
|
||||
? "visible"
|
||||
: "hidden"
|
||||
}
|
||||
name={selection.label}
|
||||
>
|
||||
{selection.messages.length > 0 ? (
|
||||
<div className="i18n-message-workspace__editor-list">
|
||||
{selection.messages.map((message) => (
|
||||
<MessageEditor
|
||||
key={`${message.catalog}:${message.id}`}
|
||||
locale={locale}
|
||||
message={message}
|
||||
onSave={(translation) =>
|
||||
updateMessage(message, translation)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="i18n-message-workspace__empty">
|
||||
{visibleMessages.length === 0
|
||||
? messages.messagePanel.emptyPackage
|
||||
: messages.messagePanel.selectMessage}
|
||||
</div>
|
||||
)}
|
||||
</React.Activity>
|
||||
)
|
||||
})
|
||||
) : (
|
||||
<div className="i18n-message-workspace__empty">
|
||||
{messages.messagePanel.selectMessage}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user