Merge branch 'master' into add-topics-to-notification-settings

Signed-off-by: billyatroadie <bstalnaker@roadie.com>

plugins/notifications/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @backstage/plugin-notifications
 
+## 0.5.4-next.2
+
+### Patch Changes
+
+- a47fd39: Removes instances of default React imports, a necessary update for the upcoming React 19 migration.
+
+  <https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html>
+
+- Updated dependencies
+  - @backstage/frontend-plugin-api@0.10.1-next.1
+  - @backstage/core-compat-api@0.4.1-next.2
+  - @backstage/core-components@0.17.1-next.1
+  - @backstage/core-plugin-api@1.10.6-next.0
+  - @backstage/theme@0.6.5-next.0
+  - @backstage/errors@1.2.7
+  - @backstage/types@1.2.1
+  - @backstage/plugin-notifications-common@0.0.8
+  - @backstage/plugin-signals-react@0.0.12-next.0
+
 ## 0.5.4-next.1
 
 ### Patch Changes

plugins/notifications/dev/index.tsx

@@ -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,

plugins/notifications/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-notifications",
-  "version": "0.5.4-next.1",
+  "version": "0.5.4-next.2",
   "backstage": {
     "role": "frontend-plugin",
     "pluginId": "notifications",

plugins/notifications/report-alpha.api.md

@@ -8,7 +8,7 @@ import { AnyRouteRefParams } from '@backstage/frontend-plugin-api';
 import { ConfigurableExtensionDataRef } from '@backstage/frontend-plugin-api';
 import { ExtensionDefinition } from '@backstage/frontend-plugin-api';
 import { FrontendPlugin } from '@backstage/frontend-plugin-api';
-import { default as React_2 } from 'react';
+import { JSX as JSX_2 } from 'react';
 import { RouteRef } from '@backstage/frontend-plugin-api';
 
 // @alpha (undocumented)
@@ -43,11 +43,7 @@ const _default: FrontendPlugin<
         path?: string | undefined;
       };
       output:
-        | ConfigurableExtensionDataRef<
-            React_2.JSX.Element,
-            'core.reactElement',
-            {}
-          >
+        | ConfigurableExtensionDataRef<JSX_2.Element, 'core.reactElement', {}>
         | ConfigurableExtensionDataRef<string, 'core.routing.path', {}>
         | ConfigurableExtensionDataRef<
             RouteRef<AnyRouteRefParams>,

plugins/notifications/report.api.md

@@ -8,12 +8,11 @@ import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { DiscoveryApi } from '@backstage/core-plugin-api';
 import { FetchApi } from '@backstage/core-plugin-api';
 import { IconComponent } from '@backstage/core-plugin-api';
-import { JSX as JSX_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { Notification as Notification_2 } from '@backstage/plugin-notifications-common';
 import { NotificationSettings } from '@backstage/plugin-notifications-common';
 import { NotificationSeverity } from '@backstage/plugin-notifications-common';
 import { NotificationStatus } from '@backstage/plugin-notifications-common';
-import { default as React_2 } from 'react';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { TableProps } from '@backstage/core-components';
 
@@ -136,7 +135,7 @@ export const NotificationsSidebarItem: (props?: {
   text?: string;
   disableHighlight?: boolean;
   noTrack?: boolean;
-}) => React_2.JSX.Element;
+}) => JSX_2.Element;
 
 // @public (undocumented)
 export const NotificationsTable: ({
@@ -152,7 +151,7 @@ export const NotificationsTable: ({
   page,
   pageSize,
   totalCount,
-}: NotificationsTableProps) => React_2.JSX.Element;
+}: NotificationsTableProps) => JSX_2.Element;
 
 // @public (undocumented)
 export type NotificationsTableProps = Pick<
@@ -209,7 +208,7 @@ export function useNotificationsApi<T>(
 export const UserNotificationSettingsCard: (props: {
   originNames?: Record<string, string>;
   topicNames?: Record<string, string>;
-}) => React_2.JSX.Element;
+}) => JSX_2.Element;
 
 // (No @packageDocumentation comment for this package)
 ```

plugins/notifications/src/alpha.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import {
   ApiBlueprint,
   PageBlueprint,

plugins/notifications/src/components/NotificationsFilters/NotificationsFilters.tsx

@@ -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);

plugins/notifications/src/components/NotificationsPage/NotificationsPage.tsx

@@ -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],
   );

plugins/notifications/src/components/NotificationsSideBarItem/NotificationsSideBarItem.tsx

@@ -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(

plugins/notifications/src/components/NotificationsTable/BulkActions.tsx

@@ -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';

plugins/notifications/src/components/NotificationsTable/NotificationIcon.tsx

@@ -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';

plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx

@@ -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 [
       {

plugins/notifications/src/components/NotificationsTable/SelectAll.tsx

@@ -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';

plugins/notifications/src/components/NotificationsTable/SeverityIcon.tsx

@@ -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';

plugins/notifications/src/components/UserNotificationSettingsCard/UserNotificationSettingsCard.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { createContext, useContext, useEffect } from 'react';
+import React, { createContext, useState useContext, useEffect } from 'react';
 import { ErrorPanel, InfoCard, Progress } from '@backstage/core-components';
 import { useNotificationsApi } from '../../hooks';
 import { NotificationSettings } from '@backstage/plugin-notifications-common';
@@ -83,7 +83,7 @@ export const UserNotificationSettingsCard = (props: {
   originNames?: Record<string, string>;
   topicNames?: Record<string, string>;
 }) => {
-  const [settings, setNotificationSettings] = React.useState<
+  const [settings, setNotificationSettings] = useState<
     NotificationSettings | undefined
   >(undefined);