Upgrade all UI dependencies on Oct 31, 2024

Author: EricWittmann

ui/tests/package-lock.json

@@ -13,7 +13,7 @@
   "devDependencies": {
     "@apicurio/eslint-config": "0.3.0",
     "@playwright/test": "1.48.2",
-    "@types/node": "22.8.4",
+    "@types/node": "22.8.5",
     "@typescript-eslint/eslint-plugin": "8.12.2",
     "@typescript-eslint/parser": "8.12.2",
     "eslint": "8.57.1",

ui/tests/package.json

@@ -23,14 +23,14 @@
     "@types/pluralize": "0.0.33",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.12.2",
+    "@typescript-eslint/parser": "8.12.2",
     "@vitejs/plugin-react-swc": "3.7.1",
     "copyfiles": "2.4.1",
     "eslint": "8.57.1",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-react-refresh": "0.4.14",
-    "rimraf": "5.0.10",
+    "rimraf": "6.0.1",
     "typescript": "5.6.3",
     "vite": "5.4.10",
     "vite-tsconfig-paths": "5.0.1"
@@ -46,7 +46,7 @@
     "@microsoft/kiota-serialization-multipart": "1.0.0-preview.46",
     "@microsoft/kiota-serialization-text": "1.0.0-preview.65",
     "@patternfly/patternfly": "5.4.2",
-    "@patternfly/react-code-editor": "5.4.10",
+    "@patternfly/react-code-editor": "5.4.11",
     "@patternfly/react-core": "5.4.8",
     "@patternfly/react-icons": "5.4.2",
     "@patternfly/react-table": "5.4.9",

ui/ui-app/package-lock.json

@@ -13,9 +13,7 @@ import { LoggerService, useLoggerService } from "@services/useLoggerService.ts";
 import { ApplicationAuth, AuthConfig, AuthConfigContext } from "@apicurio/common-ui-components";
 import { ArtifactPage } from "@app/pages/artifact";
 
-export type AppProps = {
-    // No props
-};
+export type AppProps = object;
 
 /**
  * The main application class.

ui/ui-app/package.json

@@ -6,9 +6,7 @@ import { AppNavigation, useAppNavigation } from "@services/useAppNavigation.ts";
 import { ConfigService, useConfigService } from "@services/useConfigService.ts";
 
 
-export type AppHeaderProps = {
-    // No properties.
-};
+export type AppHeaderProps = object;
 
 
 export const AppHeader: FunctionComponent<AppHeaderProps> = () => {

ui/ui-app/src/app/App.tsx

@@ -8,9 +8,7 @@ import { SystemService, useSystemService } from "@services/useSystemService.ts";
 import { ConfigService, useConfigService } from "@services/useConfigService.ts";
 
 
-export type AppHeaderToolbarProps = {
-    // No properties.
-};
+export type AppHeaderToolbarProps = object;
 
 
 export const AppHeaderToolbar: FunctionComponent<AppHeaderToolbarProps> = () => {

ui/ui-app/src/app/components/header/AppHeader.tsx

@@ -5,9 +5,7 @@ import { UserService, useUserService } from "@services/useUserService.ts";
 import { ConfigService, useConfigService } from "@services/useConfigService.ts";
 
 
-export type AvatarDropdownProps = {
-    // No props
-};
+export type AvatarDropdownProps = object;
 
 
 export const AvatarDropdown: FunctionComponent<AvatarDropdownProps> = () => {

ui/ui-app/src/app/components/header/AppHeaderToolbar.tsx

@@ -13,19 +13,13 @@ import {
 } from "@patternfly/react-core";
 import { ExclamationCircleIcon } from "@patternfly/react-icons";
 import { AppNavigation, useAppNavigation } from "@services/useAppNavigation.ts";
+import { PageProperties } from "@app/pages";
 
 
-/**
- * Properties
- */
-export type NotFoundPageProps = {
-    // No page properties.
-};
-
 /**
  * The "not found" page.
  */
-export const NotFoundPage: FunctionComponent<NotFoundPageProps> = () => {
+export const NotFoundPage: FunctionComponent<PageProperties> = () => {
     const appNavigation: AppNavigation = useAppNavigation();
 
     return  (

ui/ui-app/src/app/components/header/AvatarDropdown.tsx

@@ -0,0 +1,2 @@
+
+export type PageProperties = object; // Currently pages do not have properties

ui/ui-app/src/app/pages/404/404.tsx

@@ -2,7 +2,7 @@ import { FunctionComponent, useEffect, useState } from "react";
 import "./ArtifactPage.css";
 import { Breadcrumb, BreadcrumbItem, PageSection, PageSectionVariants, Tab, Tabs } from "@patternfly/react-core";
 import { Link, useLocation, useParams } from "react-router-dom";
-import { PageDataLoader, PageError, PageErrorHandler, toPageError } from "@app/pages";
+import { PageDataLoader, PageError, PageErrorHandler, PageProperties, toPageError } from "@app/pages";
 import {
     ChangeOwnerModal,
     ConfirmDeleteModal,
@@ -37,14 +37,10 @@ import {
 import { AddVersionToBranchModal } from "@app/components/modals/AddVersionToBranchModal.tsx";
 
 
-export type ArtifactPageProps = {
-    // No properties
-}
-
 /**
  * The artifact version page.
  */
-export const ArtifactPage: FunctionComponent<ArtifactPageProps> = () => {
+export const ArtifactPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [artifact, setArtifact] = useState<ArtifactMetaData>();

ui/ui-app/src/app/pages/PageProperties.ts

@@ -2,7 +2,14 @@ import { FunctionComponent, useEffect, useState } from "react";
 import "./BranchPage.css";
 import { Breadcrumb, BreadcrumbItem, PageSection, PageSectionVariants, Tab, Tabs } from "@patternfly/react-core";
 import { Link, useLocation, useParams } from "react-router-dom";
-import { BranchVersionsTabContent, PageDataLoader, PageError, PageErrorHandler, toPageError } from "@app/pages";
+import {
+    BranchVersionsTabContent,
+    PageDataLoader,
+    PageError,
+    PageErrorHandler,
+    PageProperties,
+    toPageError
+} from "@app/pages";
 import { ConfirmDeleteModal, EditMetaDataModal, IfFeature, MetaData } from "@app/components";
 import { PleaseWaitModal } from "@apicurio/common-ui-components";
 import { AppNavigation, useAppNavigation } from "@services/useAppNavigation.ts";
@@ -12,14 +19,10 @@ import { ArtifactMetaData, BranchMetaData, SearchedVersion } from "@sdk/lib/gene
 import { BranchInfoTabContent, BranchPageHeader } from "@app/pages/branch/components";
 
 
-export type BranchPageProps = {
-    // No properties
-}
-
 /**
  * The artifact branch page.
  */
-export const BranchPage: FunctionComponent<BranchPageProps> = () => {
+export const BranchPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [artifact, setArtifact] = useState<ArtifactMetaData>();

ui/ui-app/src/app/pages/artifact/ArtifactPage.tsx

@@ -11,6 +11,7 @@ import {
     PageDataLoader,
     PageError,
     PageErrorHandler,
+    PageProperties,
     toPageError
 } from "@app/pages";
 import { CreateArtifactModal, CreateGroupModal, InvalidContentModal, RootPageHeader } from "@app/components";
@@ -34,13 +35,6 @@ import {
     SortOrderObject
 } from "@sdk/lib/generated-client/models";
 
-/**
- * Properties
- */
-export type ExplorePageProps = {
-    // No properties.
-}
-
 const EMPTY_RESULTS: ArtifactSearchResults = {
     artifacts: [],
     count: 0
@@ -54,7 +48,7 @@ const DEFAULT_PAGING: Paging = {
 /**
  * The Explore page.
  */
-export const ExplorePage: FunctionComponent<ExplorePageProps> = () => {
+export const ExplorePage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [exploreType, setExploreType] = useState(ExploreType.ARTIFACT);

ui/ui-app/src/app/pages/branch/BranchPage.tsx

@@ -8,11 +8,13 @@ import {
     PageDataLoader,
     PageError,
     PageErrorHandler,
+    PageProperties,
     toPageError
 } from "@app/pages";
 import {
     ChangeOwnerModal,
-    ConfirmDeleteModal, CreateArtifactModal,
+    ConfirmDeleteModal,
+    CreateArtifactModal,
     EditMetaDataModal,
     IfFeature,
     InvalidContentModal,
@@ -33,14 +35,10 @@ import {
 } from "@sdk/lib/generated-client/models";
 
 
-export type GroupPageProps = {
-    // No properties
-}
-
 /**
  * The group page.
  */
-export const GroupPage: FunctionComponent<GroupPageProps> = () => {
+export const GroupPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [group, setGroup] = useState<GroupMetaData>();

ui/ui-app/src/app/pages/explore/ExplorePage.tsx

@@ -11,4 +11,5 @@ export * from "./PageDataLoader";
 export * from "./PageError";
 export * from "./PageErrorHandler";
 export * from "./PageErrorType";
+export * from "./PageProperties";
 export * from "./toPageError";

ui/ui-app/src/app/pages/group/GroupPage.tsx

@@ -5,6 +5,7 @@ import {
     PageDataLoader,
     PageError,
     PageErrorHandler,
+    PageProperties,
     RoleList,
     RoleMappingsEmptyState,
     RoleToolbar,
@@ -20,16 +21,11 @@ import { Paging } from "@models/paging.model.ts";
 import { RoleMapping } from "@sdk/lib/generated-client/models";
 
 
-export type RolesPageProps = {
-    // No props.
-}
-
-
 /**
  * The roles/access page.
  */
 // export class RolesPage extends PageComponent<RolesPageProps, RolesPageState> {
-export const RolesPage: FunctionComponent<RolesPageProps> = () => {
+export const RolesPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [isGrantAccessOpen, setIsGrantAccessOpen] = useState(false);

ui/ui-app/src/app/pages/index.ts

@@ -1,12 +1,13 @@
 import { FunctionComponent } from "react";
 import { Navigate } from "react-router-dom";
 import { AppNavigation, useAppNavigation } from "@services/useAppNavigation.ts";
+import { PageProperties } from "@app/pages";
 
 
 /**
  * The root redirect page.
  */
-export const RootRedirectPage: FunctionComponent<any> = () => {
+export const RootRedirectPage: FunctionComponent<PageProperties> = () => {
     const appNav: AppNavigation = useAppNavigation();
 
     const redirect: string = appNav.createLink("/explore");

ui/ui-app/src/app/pages/roles/RolesPage.tsx

@@ -2,20 +2,16 @@ import React, { FunctionComponent, useEffect, useState } from "react";
 import "./RulesPage.css";
 import { PageSection, PageSectionVariants, TextContent } from "@patternfly/react-core";
 import { RootPageHeader, RuleList, RuleListType } from "@app/components";
-import { PageDataLoader, PageError, PageErrorHandler, toPageError } from "@app/pages";
+import { PageDataLoader, PageError, PageErrorHandler, PageProperties, toPageError } from "@app/pages";
 import { AdminService, useAdminService } from "@services/useAdminService.ts";
 import { LoggerService, useLoggerService } from "@services/useLoggerService.ts";
 import { Rule, RuleType } from "@sdk/lib/generated-client/models";
 
 
-export type RulesPageProps = {
-    // No properties.
-}
-
 /**
  * The global rules page.
  */
-export const RulesPage: FunctionComponent<RulesPageProps> = () => {
+export const RulesPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [rules, setRules] = useState<Rule[]>([]);

ui/ui-app/src/app/pages/root/RootRedirectPage.tsx

@@ -10,7 +10,7 @@ import {
     TextContent
 } from "@patternfly/react-core";
 import { RootPageHeader } from "@app/components";
-import { ConfigProperty, PageDataLoader, PageError, PageErrorHandler, toPageError } from "@app/pages";
+import { ConfigProperty, PageDataLoader, PageError, PageErrorHandler, PageProperties, toPageError } from "@app/pages";
 import { If, IfNotEmpty } from "@apicurio/common-ui-components";
 import { AdminService, useAdminService } from "@services/useAdminService.ts";
 import { AlertsService, useAlertsService } from "@services/useAlertsService.tsx";
@@ -70,15 +70,10 @@ const PROPERTY_GROUPS: PropertyGroup[] = [
     },
 ];
 
-
-export type SettingsPageProps = {
-    // No props
-}
-
 /**
  * The settings page.
  */
-export const SettingsPage: FunctionComponent<SettingsPageProps> = () => {
+export const SettingsPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [properties, setProperties] = useState<ConfigurationProperty[]>([]);

ui/ui-app/src/app/pages/rules/RulesPage.tsx

@@ -10,7 +10,7 @@ import {
     PageError,
     PageErrorHandler,
     toPageError,
-    VersionPageHeader
+    VersionPageHeader, PageProperties
 } from "@app/pages";
 import { ReferencesTabContent } from "@app/pages/version/components/tabs/ReferencesTabContent.tsx";
 import { ConfirmDeleteModal, EditMetaDataModal, GenerateClientModal, IfFeature, MetaData } from "@app/components";
@@ -24,14 +24,10 @@ import { ArtifactTypes } from "@services/useArtifactTypesService.ts";
 import { ArtifactMetaData, Labels, VersionMetaData } from "@sdk/lib/generated-client/models";
 
 
-export type ArtifactVersionPageProps = {
-    // No properties
-}
-
 /**
  * The artifact version page.
  */
-export const VersionPage: FunctionComponent<ArtifactVersionPageProps> = () => {
+export const VersionPage: FunctionComponent<PageProperties> = () => {
     const [pageError, setPageError] = useState<PageError>();
     const [loaders, setLoaders] = useState<Promise<any> | Promise<any>[] | undefined>();
     const [artifact, setArtifact] = useState<ArtifactMetaData>();
@@ -66,7 +62,7 @@ export const VersionPage: FunctionComponent<ArtifactVersionPageProps> = () => {
                 if (eo && eo.status && eo.status === 404) {
                     return true;
                 }
-            } catch (e) {
+            } catch {
                 // Do nothing
             }
         }

ui/ui-app/src/app/pages/settings/SettingsPage.tsx

@@ -26,7 +26,7 @@ const formatJsonContent = (artifactContent: string): string => {
         if (pval) {
             return JSON.stringify(pval, null, 2);
         }
-    } catch (e) {
+    } catch {
         // Do nothing
     }
     return artifactContent;