eclipse · amvanbaren · Jun 5, 2024 · Jun 4, 2024
diff --git a/webui/package.json b/webui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "openvsx-webui",
-    "version": "0.11.7",
+    "version": "0.11.8",
     "description": "User interface for Eclipse Open VSX",
     "keywords": [
         "react",

diff --git a/webui/src/main.tsx b/webui/src/main.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react';
+import React, { FunctionComponent, ReactNode, useEffect, useState, useRef } from 'react';
 import { CssBaseline } from '@mui/material';
 import { Route, Routes } from 'react-router-dom';
 import { AdminDashboard, AdminDashboardRoutes } from './pages/admin-dashboard/admin-dashboard';
@@ -28,25 +28,25 @@ export const Main: FunctionComponent<MainProps> = props => {
     const [userLoading, setUserLoading] = useState<boolean>(true);
     const [error, setError] = useState<{message: string, code?: number | string}>();
     const [isErrorDialogOpen, setIsErrorDialogOpen] = useState<boolean>(false);
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
 
     useEffect(() => {
         // If there was an authentication error, get the message from the server and show it
         const searchParams = new URLSearchParams(window.location.search);
         if (searchParams.has('auth-error')) {
-            props.service.getUserAuthError(abortController).then(onError);
+            props.service.getUserAuthError(abortController.current).then(onError);
         }
 
         // Get data of the currently logged in user
         updateUser();
 
-        return () => abortController.abort();
+        return () => abortController.current.abort();
     }, []);
 
     const updateUser = async () => {
         try {
             setUserLoading(true);
-            const user = await props.service.getUser(abortController);
+            const user = await props.service.getUser(abortController.current);
             if (isError(user)) {
                 // An error result with HTTP OK status indicates that the user is not logged in.
                 setUser(undefined);

diff --git a/webui/src/pages/admin-dashboard/extension-admin.tsx b/webui/src/pages/admin-dashboard/extension-admin.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect } from 'react';
+import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import { SearchListContainer } from './search-list-container';
 import { ExtensionListSearchfield } from '../extension-list/extension-list-searchfield';
 import { Button, Typography } from '@mui/material';
@@ -18,10 +18,10 @@ import { ExtensionVersionContainer } from './extension-version-container';
 import { StyledInput } from './namespace-input';
 
 export const ExtensionAdmin: FunctionComponent = props => {
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -59,7 +59,7 @@ export const ExtensionAdmin: FunctionComponent = props => {
         setExtensionFieldError(false);
         try {
             setLoading(true);
-            const extensionDetail = await service.admin.getExtension(abortController, namespaceValue, extensionValue);
+            const extensionDetail = await service.admin.getExtension(abortController.current, namespaceValue, extensionValue);
             if (isError(extensionDetail)) {
                 throw extensionDetail;
             }

diff --git a/webui/src/pages/admin-dashboard/extension-remove-dialog.tsx b/webui/src/pages/admin-dashboard/extension-remove-dialog.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect } from 'react';
+import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import { Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Typography } from '@mui/material';
 import { ButtonWithProgress } from '../../components/button-with-progress';
 import { Extension, TargetPlatformVersion } from '../../extension-registry-types';
@@ -18,10 +18,10 @@ import { getTargetPlatformDisplayName } from '../../utils';
 export const ExtensionRemoveDialog: FunctionComponent<ExtensionRemoveDialogProps> = props => {
     const { service, handleError } = useContext(MainContext);
 
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -49,7 +49,7 @@ export const ExtensionRemoveDialog: FunctionComponent<ExtensionRemoveDialogProps
                     });
             }
 
-            await service.admin.deleteExtensions(abortController, { namespace: props.extension.namespace, extension: props.extension.name, targetPlatformVersions: targetPlatformVersions });
+            await service.admin.deleteExtensions(abortController.current, { namespace: props.extension.namespace, extension: props.extension.name, targetPlatformVersions: targetPlatformVersions });
 
             props.onUpdate();
             setDialogOpen(false);

diff --git a/webui/src/pages/admin-dashboard/extension-version-container.tsx b/webui/src/pages/admin-dashboard/extension-version-container.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { ChangeEvent, FunctionComponent, useContext, useState, useEffect } from 'react';
+import React, { ChangeEvent, FunctionComponent, useContext, useState, useEffect, useRef } from 'react';
 import { Extension, TargetPlatformVersion, VERSION_ALIASES } from '../../extension-registry-types';
 import { Box, Grid, Typography, FormControl, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
 import { ExtensionRemoveDialog } from './extension-remove-dialog';
@@ -19,6 +19,7 @@ export const ExtensionVersionContainer: FunctionComponent<ExtensionVersionContai
     const WILDCARD = '*';
     const { extension } = props;
     const { service } = useContext(MainContext);
+    const abortController = useRef<AbortController>(new AbortController());
 
     const getTargetPlatformVersions = () => {
         const versionMap: TargetPlatformVersion[] = [];
@@ -36,10 +37,9 @@ export const ExtensionVersionContainer: FunctionComponent<ExtensionVersionContai
         return versionMap;
     };
 
-    const abortController = new AbortController();
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -50,7 +50,7 @@ export const ExtensionVersionContainer: FunctionComponent<ExtensionVersionContai
             URL.revokeObjectURL(icon);
         }
 
-        service.getExtensionIcon(abortController, props.extension).then(setIcon);
+        service.getExtensionIcon(abortController.current, props.extension).then(setIcon);
         setTargetPlatformVersions(getTargetPlatformVersions());
     }, [props.extension]);
 

diff --git a/webui/src/pages/admin-dashboard/namespace-admin.tsx b/webui/src/pages/admin-dashboard/namespace-admin.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect } from 'react';
+import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import { Typography, Box } from '@mui/material';
 import { NamespaceDetail, NamespaceDetailConfigContext } from '../user/user-settings-namespace-detail';
 import { ButtonWithProgress } from '../../components/button-with-progress';
@@ -24,10 +24,10 @@ export const NamespaceAdmin: FunctionComponent = props => {
     const [currentNamespace, setCurrentNamespace] = useState<Namespace | undefined>();
     const [notFound, setNotFound] = useState('');
 
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -39,7 +39,7 @@ export const NamespaceAdmin: FunctionComponent = props => {
         }
         try {
             setLoading(true);
-            const namespace = await service.admin.getNamespace(abortController, namespaceName);
+            const namespace = await service.admin.getNamespace(abortController.current, namespaceName);
             if (isError(namespace)) {
                 throw namespace;
             }
@@ -66,7 +66,7 @@ export const NamespaceAdmin: FunctionComponent = props => {
     const onCreate = async () => {
         try {
             setCreating(true);
-            await service.admin.createNamespace(abortController, {
+            await service.admin.createNamespace(abortController.current, {
                 name: inputValue
             });
             await fetchNamespace(inputValue);

diff --git a/webui/src/pages/admin-dashboard/namespace-change-dialog.tsx b/webui/src/pages/admin-dashboard/namespace-change-dialog.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
- import React, { ChangeEvent, FunctionComponent, useState, useContext, useEffect } from 'react';
+ import React, { ChangeEvent, FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
  import {
      Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, TextField
  } from '@mui/material';
@@ -34,10 +34,10 @@
      const [infoDialogIsOpen, setInfoDialogIsOpen] = useState(false);
      const [infoDialogMessage, setInfoDialogMessage] = useState('');
 
-     const abortController = new AbortController();
+     const abortController = useRef<AbortController>(new AbortController());
      useEffect(() => {
          return () => {
-             abortController.abort();
+             abortController.current.abort();
          };
      }, []);
 
@@ -70,7 +70,7 @@
             setWorking(true);
             props.setLoadingState(true);
             const oldNamespace = props.namespace.name;
-            const result = await service.admin.changeNamespace(abortController, { oldNamespace, newNamespace, removeOldNamespace, mergeIfNewNamespaceAlreadyExists });
+            const result = await service.admin.changeNamespace(abortController.current, { oldNamespace, newNamespace, removeOldNamespace, mergeIfNewNamespaceAlreadyExists });
             if (isError(result)) {
                 throw result;
             }

diff --git a/webui/src/pages/admin-dashboard/publisher-admin.tsx b/webui/src/pages/admin-dashboard/publisher-admin.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, createContext, useEffect } from 'react';
+import React, { FunctionComponent, useState, useContext, createContext, useEffect, useRef } from 'react';
 import { Typography, Box } from '@mui/material';
 import { PublisherInfo } from '../../extension-registry-types';
 import { MainContext } from '../../context';
@@ -20,10 +20,10 @@ export const UpdateContext = createContext({ handleUpdate: () => { } });
 export const PublisherAdmin: FunctionComponent = props => {
     const { pageSettings, service, user, handleError } = useContext(MainContext);
 
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -40,7 +40,7 @@ export const PublisherAdmin: FunctionComponent = props => {
         try {
             setLoading(true);
             if (publisherName !== '') {
-                const publisher = await service.admin.getPublisherInfo(abortController, 'github', publisherName);
+                const publisher = await service.admin.getPublisherInfo(abortController.current, 'github', publisherName);
                 setNotFound('');
                 setPublisher(publisher);
             } else {

diff --git a/webui/src/pages/admin-dashboard/publisher-revoke-dialog.tsx b/webui/src/pages/admin-dashboard/publisher-revoke-dialog.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useState, useContext, useEffect } from 'react';
+import React, { FunctionComponent, useState, useContext, useEffect, useRef } from 'react';
 import {
     Button, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Typography, Link
 } from '@mui/material';
@@ -24,10 +24,10 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
 
     const [dialogOpen, setDialogOpen] = useState(false);
     const [working, setWorking] = useState(false);
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
     useEffect(() => {
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -45,7 +45,7 @@ export const PublisherRevokeDialog: FunctionComponent<PublisherRevokeDialogProps
         try {
             setWorking(true);
             const user = props.publisherInfo.user;
-            const result = await service.admin.revokePublisherContributions(abortController, user.provider!, user.loginName);
+            const result = await service.admin.revokePublisherContributions(abortController.current, user.provider!, user.loginName);
             if (isError(result)) {
                 throw result;
             }

diff --git a/webui/src/pages/extension-detail/extension-detail-changes.tsx b/webui/src/pages/extension-detail/extension-detail-changes.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
+import React, { FunctionComponent, useContext, useEffect, useState, useRef } from 'react';
 import { Box, Divider, Typography } from '@mui/material';
 import { MainContext } from '../../context';
 import { SanitizedMarkdown } from '../../components/sanitized-markdown';
@@ -19,11 +19,11 @@ export const ExtensionDetailChanges: FunctionComponent<ExtensionDetailChangesPro
     const [changelog, setChangelog] = useState<string>();
     const [loading, setLoading] = useState<boolean>(true);
     const context = useContext(MainContext);
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
 
     useEffect(() => {
         updateChanges();
-        return () => abortController.abort();
+        return () => abortController.current.abort();
     }, []);
 
     useEffect(() => {
@@ -34,7 +34,7 @@ export const ExtensionDetailChanges: FunctionComponent<ExtensionDetailChangesPro
     const updateChanges = async (): Promise<void> => {
         if (props.extension.files.changelog) {
             try {
-                const changelog = await context.service.getExtensionChangelog(abortController, props.extension);
+                const changelog = await context.service.getExtensionChangelog(abortController.current, props.extension);
                 setChangelog(changelog);
             } catch (err) {
                 context.handleError(err);

diff --git a/webui/src/pages/extension-detail/extension-detail-overview.tsx b/webui/src/pages/extension-detail/extension-detail-overview.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { FunctionComponent, ReactNode, useContext, useEffect, useState } from 'react';
+import React, { FunctionComponent, ReactNode, useContext, useEffect, useState, useRef } from 'react';
 import { Box, Theme, Typography, Button, Link, NativeSelect, SxProps, styled } from '@mui/material';
 import { Link as RouteLink, useNavigate, useParams } from 'react-router-dom';
 import HomeIcon from '@mui/icons-material/Home';
@@ -33,12 +33,12 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
     const { pageSettings, service, handleError } = useContext(MainContext);
     const params = useParams();
     const navigate = useNavigate();
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
 
     useEffect(() => {
         updateReadme();
         return () => {
-            abortController.abort();
+            abortController.current.abort();
         };
     }, []);
 
@@ -50,7 +50,7 @@ export const ExtensionDetailOverview: FunctionComponent<ExtensionDetailOverviewP
     const updateReadme = async (): Promise<void> => {
         if (props.extension.files.readme) {
             try {
-                const readme = await service.getExtensionReadme(abortController, props.extension);
+                const readme = await service.getExtensionReadme(abortController.current, props.extension);
                 setReadme(readme);
                 setLoading(false);
             } catch (err) {

diff --git a/webui/src/pages/extension-detail/extension-detail-reviews.tsx b/webui/src/pages/extension-detail/extension-detail-reviews.tsx
@@ -8,7 +8,7 @@
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
 
-import React, { Fragment, FunctionComponent, ReactNode, useContext, useState, useEffect } from 'react';
+import React, { Fragment, FunctionComponent, ReactNode, useContext, useState, useEffect, useRef } from 'react';
 import { Box, Typography, Divider, Link } from '@mui/material';
 import { MainContext } from '../../context';
 import { toLocalTime } from '../../utils';
@@ -25,16 +25,16 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
     const [loading, setLoading] = useState<boolean>(true);
     const [revoked, setRevoked] = useState<boolean>(false);
     const context = useContext(MainContext);
-    const abortController = new AbortController();
+    const abortController = useRef<AbortController>(new AbortController());
 
     useEffect(() => {
         updateReviews();
-        return () => abortController.abort();
+        return () => abortController.current.abort();
     }, []);
 
     const updateReviews = async () => {
         try {
-            const reviewList = await context.service.getExtensionReviews(abortController, props.extension);
+            const reviewList = await context.service.getExtensionReviews(abortController.current, props.extension);
             setReviewList(reviewList);
         } catch (err) {
             context.handleError(err);
@@ -53,7 +53,7 @@ export const ExtensionDetailReviews: FunctionComponent<ExtensionDetailReviewsPro
     const handleRevokeButton = async () => {
         setRevoked(true);
         try {
-            const result = await context.service.deleteReview(abortController, reviewList!.deleteUrl);
+            const result = await context.service.deleteReview(abortController.current, reviewList!.deleteUrl);
             if (isError(result)) {
                 throw result;
             }