mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-06 04:36:21 +02:00
Code Issues Projects Releases Wiki Activity

lint lint lint

Browse Source
This commit is contained in:
Half-Shot 2025-12-19 17:52:52 +00:00
parent 22b68bfcc1
commit 940f5be5aa
4 changed files with 50 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/shared-components/src/composer/Banner/Banner.tsx
View File

@ -12,7 +12,7 @@ import React, {
type ReactNode,
type PropsWithChildren,
useMemo,
HTMLAttributes,
type HTMLAttributes,
} from "react";
import { Button } from "@vector-im/compound-web";
import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
@ -73,7 +73,7 @@ export function Banner({
default:
return <InfoIcon fontSize={24} />;
}
}, [type, props]);
}, [type]);
return (
<div {...props} className={classes} data-type={type}>

2
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.stories.tsx
View File

@ -6,6 +6,7 @@
*/
import { type Meta, type StoryFn } from "@storybook/react-vite";
import React, { type JSX } from "react";
import { fn } from "storybook/test";
import { useMockedViewModel } from "../../useMockedViewModel";
import {
@ -14,7 +15,6 @@ import {
type RoomStatusBarViewActions,
type RoomStatusBarViewSnapshot,
} from "./RoomStatusBarView";
import { fn } from "storybook/test";
type RoomStatusBarProps = RoomStatusBarViewSnapshot & RoomStatusBarViewActions;

2
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.test.tsx
View File

@ -8,9 +8,9 @@
import React from "react";
import { render } from "jest-matrix-react";
import { composeStories } from "@storybook/react-vite";
import userEvent from "@testing-library/user-event";
import * as stories from "./RoomStatusBarView.stories.tsx";
import userEvent from "@testing-library/user-event";
const { WithConnectionLost, WithConsentLink, WithResourceLimit, WithUnsentMessages, WithLocalRoomRetry } =
composeStories(stories);

90
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.tsx
View File

@ -6,13 +6,13 @@
*/
import React, { useCallback, useId, type JSX } from "react";
import { RestartIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { Button, InlineSpinner, Text } from "@vector-im/compound-web";
import styles from "./RoomStatusBarView.module.css";
import { useViewModel } from "../../useViewModel";
import { type ViewModel } from "../../viewmodel";
import { RestartIcon, DeleteIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { useI18n } from "../../utils/i18nContext";
import { Button, InlineSpinner, Text } from "@vector-im/compound-web";
import { Banner } from "../../composer/Banner";
export interface RoomStatusBarViewActions {
/**
@ -109,7 +109,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
ev.preventDefault();
vm.onDeleteAllClick?.();
},
[vm.onDeleteAllClick],
[vm],
);
const resendClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
@ -117,7 +117,7 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
ev.preventDefault();
vm.onResendAllClick?.();
},
[vm.onResendAllClick],
[vm],
);
const retryRoomCreationClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
@ -125,13 +125,13 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
ev.preventDefault();
vm.onRetryRoomCreationClick?.();
},
[vm.onRetryRoomCreationClick],
[vm],
);
const termsAndConditionsClicked = useCallback<React.MouseEventHandler<HTMLAnchorElement>>(() => {
// Allow the link to go through.
vm.onTermsAndConditionsClicked?.();
}, [vm.onTermsAndConditionsClicked]);
}, [vm]);
if (snapshot.state === null) {
// Nothing to show!
@ -180,12 +180,6 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
</Banner>
);
case RoomStatusBarState.ResourceLimited:
const title =
{
monthly_active_user: _t("room|status_bar|monthly_user_limit_reached_title"),
hs_disabled: _t("room|status_bar|homeserver_blocked_title"),
}[snapshot.resourceLimit] || _t("room|status_bar|exceeded_resource_limit_title");
return (
<Banner
type="critical"
@ -208,7 +202,10 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
{title}
{{
monthly_active_user: _t("room|status_bar|monthly_user_limit_reached_title"),
hs_disabled: _t("room|status_bar|homeserver_blocked_title"),
}[snapshot.resourceLimit] || _t("room|status_bar|exceeded_resource_limit_title")}
</Text>
<Text className={styles.description}>
{_t("room|status_bar|exceeded_resource_limit_description")}
@ -240,38 +237,43 @@ export function RoomStatusBarView({ vm }: Readonly<RoomStatusBarViewProps>): JSX
</Banner>
);
case RoomStatusBarState.UnsentMessages:
const actions = snapshot.isResending ? (
<InlineSpinner />
) : (
<>
{vm.onDeleteAllClick && (
<Button
size="sm"
kind="destructive"
Icon={DeleteIcon}
disabled={snapshot.isResending}
onClick={deleteAllClick}
>
{_t("room|status_bar|delete_all")}
</Button>
)}
{vm.onResendAllClick && (
<Button
size="sm"
kind="secondary"
Icon={RestartIcon}
disabled={snapshot.isResending}
onClick={resendClick}
className={styles.container}
>
{_t("room|status_bar|retry_all")}
</Button>
)}
</>
);
return (
<Banner role="status" type="critical" actions={actions} aria-labelledby={bannerTitleId}>
<Banner
role="status"
type="critical"
actions={
snapshot.isResending ? (
<InlineSpinner />
) : (
<>
{vm.onDeleteAllClick && (
<Button
size="sm"
kind="destructive"
Icon={DeleteIcon}
disabled={snapshot.isResending}
onClick={deleteAllClick}
>
{_t("room|status_bar|delete_all")}
</Button>
)}
{vm.onResendAllClick && (
<Button
size="sm"
kind="secondary"
Icon={RestartIcon}
disabled={snapshot.isResending}
onClick={resendClick}
className={styles.container}
>
{_t("room|status_bar|retry_all")}
</Button>
)}
</>
)
}
aria-labelledby={bannerTitleId}
>
<div className={styles.container}>
<Text id={bannerTitleId} weight="semibold">
{_t("room|status_bar|some_messages_not_sent")}