chore: update react imports
Signed-off-by: Paul Schultz <pschultz@pobox.com>
This commit is contained in:
@@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { createDevApp } from '@backstage/dev-utils';
|
||||
import {
|
||||
NotificationsPage,
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
ApiBlueprint,
|
||||
PageBlueprint,
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { ChangeEvent } from 'react';
|
||||
|
||||
import Divider from '@material-ui/core/Divider';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
@@ -139,13 +139,13 @@ export const NotificationsFilters = ({
|
||||
const sortByText = getSortByText(sorting);
|
||||
|
||||
const handleOnCreatedAfterChanged = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>,
|
||||
) => {
|
||||
onCreatedAfterChanged(event.target.value as string);
|
||||
};
|
||||
|
||||
const handleOnViewChanged = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>,
|
||||
) => {
|
||||
if (event.target.value === 'unread') {
|
||||
onUnreadOnlyChanged(true);
|
||||
@@ -164,7 +164,7 @@ export const NotificationsFilters = ({
|
||||
};
|
||||
|
||||
const handleOnSortByChanged = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>,
|
||||
) => {
|
||||
const idx = (event.target.value as string) || 'newest';
|
||||
const option = SortByOptions[idx];
|
||||
@@ -181,7 +181,7 @@ export const NotificationsFilters = ({
|
||||
}
|
||||
|
||||
const handleOnSeverityChanged = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>,
|
||||
) => {
|
||||
const value: NotificationSeverity =
|
||||
(event.target.value as NotificationSeverity) || 'normal';
|
||||
@@ -189,7 +189,7 @@ export const NotificationsFilters = ({
|
||||
};
|
||||
|
||||
const handleOnTopicChanged = (
|
||||
event: React.ChangeEvent<{ name?: string; value: unknown }>,
|
||||
event: ChangeEvent<{ name?: string; value: unknown }>,
|
||||
) => {
|
||||
const value = event.target.value as string;
|
||||
onTopicChanged(value === ALL ? undefined : value);
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useState, useMemo, useEffect } from 'react';
|
||||
import throttle from 'lodash/throttle';
|
||||
import {
|
||||
Content,
|
||||
@@ -68,19 +68,17 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
|
||||
markAsReadOnLinkOpen,
|
||||
} = props ?? {};
|
||||
|
||||
const [refresh, setRefresh] = React.useState(false);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const { lastSignal } = useSignal('notifications');
|
||||
const [unreadOnly, setUnreadOnly] = React.useState<boolean | undefined>(true);
|
||||
const [saved, setSaved] = React.useState<boolean | undefined>(undefined);
|
||||
const [pageNumber, setPageNumber] = React.useState(0);
|
||||
const [pageSize, setPageSize] = React.useState(5);
|
||||
const [containsText, setContainsText] = React.useState<string>();
|
||||
const [createdAfter, setCreatedAfter] = React.useState<string>('all');
|
||||
const [sorting, setSorting] = React.useState<SortBy>(
|
||||
SortByOptions.newest.sortBy,
|
||||
);
|
||||
const [severity, setSeverity] = React.useState<NotificationSeverity>('low');
|
||||
const [topic, setTopic] = React.useState<string>();
|
||||
const [unreadOnly, setUnreadOnly] = useState<boolean | undefined>(true);
|
||||
const [saved, setSaved] = useState<boolean | undefined>(undefined);
|
||||
const [pageNumber, setPageNumber] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(5);
|
||||
const [containsText, setContainsText] = useState<string>();
|
||||
const [createdAfter, setCreatedAfter] = useState<string>('all');
|
||||
const [sorting, setSorting] = useState<SortBy>(SortByOptions.newest.sortBy);
|
||||
const [severity, setSeverity] = useState<NotificationSeverity>('low');
|
||||
const [topic, setTopic] = useState<string>();
|
||||
|
||||
const { error, value, retry, loading } = useNotificationsApi<
|
||||
[GetNotificationsResponse, NotificationStatus, GetTopicsResponse]
|
||||
@@ -127,7 +125,7 @@ export const NotificationsPage = (props?: NotificationsPageProps) => {
|
||||
],
|
||||
);
|
||||
|
||||
const throttledSetRefresh = React.useMemo(
|
||||
const throttledSetRefresh = useMemo(
|
||||
() => throttle(setRefresh, ThrottleDelayMs),
|
||||
[setRefresh],
|
||||
);
|
||||
|
||||
+3
-3
@@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React, { useCallback, useEffect } from 'react';
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { useNotificationsApi } from '../../hooks';
|
||||
import { Link, SidebarItem } from '@backstage/core-components';
|
||||
import NotificationsIcon from '@material-ui/icons/Notifications';
|
||||
@@ -111,14 +111,14 @@ export const NotificationsSidebarItem = (props?: {
|
||||
);
|
||||
const notificationsApi = useApi(notificationsApiRef);
|
||||
const alertApi = useApi(alertApiRef);
|
||||
const [unreadCount, setUnreadCount] = React.useState(0);
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const notificationsRoute = useRouteRef(rootRouteRef)();
|
||||
// TODO: Do we want to add long polling in case signals are not available
|
||||
const { lastSignal } = useSignal<NotificationSignal>('notifications');
|
||||
const { sendWebNotification, requestUserPermission } = useWebNotifications(
|
||||
webNotificationsEnabled,
|
||||
);
|
||||
const [refresh, setRefresh] = React.useState(false);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const { setNotificationCount } = useTitleCounter();
|
||||
|
||||
const getSnackbarProperties = useCallback(
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Notification } from '@backstage/plugin-notifications-common';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { Notification } from '@backstage/plugin-notifications-common';
|
||||
import SvgIcon from '@material-ui/core/SvgIcon';
|
||||
import { useApp } from '@backstage/core-plugin-api';
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { useState, useCallback, useMemo, useEffect } from 'react';
|
||||
import throttle from 'lodash/throttle';
|
||||
// @ts-ignore
|
||||
import RelativeTime from 'react-relative-time';
|
||||
@@ -92,11 +92,11 @@ export const NotificationsTable = ({
|
||||
const alertApi = useApi(alertApiRef);
|
||||
const confirm = useConfirm();
|
||||
|
||||
const [selectedNotifications, setSelectedNotifications] = React.useState(
|
||||
const [selectedNotifications, setSelectedNotifications] = useState(
|
||||
new Set<Notification['id']>(),
|
||||
);
|
||||
|
||||
const onNotificationsSelectChange = React.useCallback(
|
||||
const onNotificationsSelectChange = useCallback(
|
||||
(ids: Notification['id'][], checked: boolean) => {
|
||||
let newSelect: Set<Notification['id']>;
|
||||
if (checked) {
|
||||
@@ -110,7 +110,7 @@ export const NotificationsTable = ({
|
||||
[selectedNotifications, setSelectedNotifications],
|
||||
);
|
||||
|
||||
const onSwitchReadStatus = React.useCallback(
|
||||
const onSwitchReadStatus = useCallback(
|
||||
(ids: Notification['id'][], newStatus: boolean) => {
|
||||
notificationsApi
|
||||
.updateNotifications({
|
||||
@@ -122,7 +122,7 @@ export const NotificationsTable = ({
|
||||
[notificationsApi, onUpdate],
|
||||
);
|
||||
|
||||
const onSwitchSavedStatus = React.useCallback(
|
||||
const onSwitchSavedStatus = useCallback(
|
||||
(ids: Notification['id'][], newStatus: boolean) => {
|
||||
notificationsApi
|
||||
.updateNotifications({
|
||||
@@ -134,7 +134,7 @@ export const NotificationsTable = ({
|
||||
[notificationsApi, onUpdate],
|
||||
);
|
||||
|
||||
const onMarkAllRead = React.useCallback(() => {
|
||||
const onMarkAllRead = useCallback(() => {
|
||||
confirm({
|
||||
title: 'Are you sure?',
|
||||
description: (
|
||||
@@ -167,12 +167,12 @@ export const NotificationsTable = ({
|
||||
});
|
||||
}, [alertApi, confirm, notificationsApi, onUpdate]);
|
||||
|
||||
const throttledContainsTextHandler = React.useMemo(
|
||||
const throttledContainsTextHandler = useMemo(
|
||||
() => throttle(setContainsText, ThrottleDelayMs),
|
||||
[setContainsText],
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
useEffect(() => {
|
||||
const allShownIds = new Set(notifications.map(n => n.id));
|
||||
const intersect = [...selectedNotifications].filter(id =>
|
||||
allShownIds.has(id),
|
||||
@@ -182,7 +182,7 @@ export const NotificationsTable = ({
|
||||
}
|
||||
}, [notifications, selectedNotifications]);
|
||||
|
||||
const compactColumns = React.useMemo((): TableColumn<Notification>[] => {
|
||||
const compactColumns = useMemo((): TableColumn<Notification>[] => {
|
||||
const showToolbar = notifications.length > 0;
|
||||
return [
|
||||
{
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import Checkbox from '@material-ui/core/Checkbox';
|
||||
import FormControlLabel from '@material-ui/core/FormControlLabel';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import { NotificationSeverity } from '@backstage/plugin-notifications-common';
|
||||
import NormalIcon from '@material-ui/icons/CheckOutlined';
|
||||
import CriticalIcon from '@material-ui/icons/ErrorOutline';
|
||||
|
||||
+2
-2
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useEffect } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ErrorPanel, InfoCard, Progress } from '@backstage/core-components';
|
||||
import { useNotificationsApi } from '../../hooks';
|
||||
import { NotificationSettings } from '@backstage/plugin-notifications-common';
|
||||
@@ -26,7 +26,7 @@ import { UserNotificationSettingsPanel } from './UserNotificationSettingsPanel';
|
||||
export const UserNotificationSettingsCard = (props: {
|
||||
originNames?: Record<string, string>;
|
||||
}) => {
|
||||
const [settings, setNotificationSettings] = React.useState<
|
||||
const [settings, setNotificationSettings] = useState<
|
||||
NotificationSettings | undefined
|
||||
>(undefined);
|
||||
|
||||
|
||||
+2
-2
@@ -14,7 +14,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { ChangeEvent } from 'react';
|
||||
import {
|
||||
isNotificationsEnabledFor,
|
||||
NotificationSettings,
|
||||
@@ -125,7 +125,7 @@ export const UserNotificationSettingsPanel = (props: {
|
||||
channel.id,
|
||||
origin,
|
||||
)}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange={(event: ChangeEvent<HTMLInputElement>) => {
|
||||
handleChange(channel.id, origin, event.target.checked);
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user