fix: handle case in preferences where component name can be undefined, causing exception that makes preferences UI unresponsive

app/assets/javascripts/preferences/panes/Extensions.tsx

@@ -3,33 +3,30 @@ import { Button } from '@/components/Button';
 import { DecoratedInput } from '@/components/DecoratedInput';
 import { WebApplication } from '@/ui_models/application';
 import { FunctionComponent } from 'preact';
+import { Title, PreferencesSegment } from '../components';
 import {
-  Title,
-  PreferencesSegment,
-} from '../components';
-import { ConfirmCustomExtension, ExtensionItem, ExtensionsLatestVersions } from './extensions-segments';
+  ConfirmCustomExtension,
+  ExtensionItem,
+  ExtensionsLatestVersions,
+} from './extensions-segments';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { observer } from 'mobx-react-lite';
 
-const loadExtensions = (application: WebApplication) => application.getItems([
-  ContentType.ActionsExtension,
-  ContentType.Component,
-  ContentType.Theme,
-], true) as SNComponent[];
+const loadExtensions = (application: WebApplication) =>
+  application.getItems(
+    [ContentType.ActionsExtension, ContentType.Component, ContentType.Theme],
+    true
+  ) as SNComponent[];
 
 export const Extensions: FunctionComponent<{
-  application: WebApplication
-  extensionsLatestVersions: ExtensionsLatestVersions,
-  className?: string,
-}> = observer(
-  ({
-     application,
-     extensionsLatestVersions,
-     className = ''
-   }) => {
-
+  application: WebApplication;
+  extensionsLatestVersions: ExtensionsLatestVersions;
+  className?: string;
+}> = observer(({ application, extensionsLatestVersions, className = '' }) => {
   const [customUrl, setCustomUrl] = useState('');
-  const [confirmableExtension, setConfirmableExtension] = useState<SNComponent | undefined>(undefined);
+  const [confirmableExtension, setConfirmableExtension] = useState<
+    SNComponent | undefined
+  >(undefined);
   const [extensions, setExtensions] = useState(loadExtensions(application));
 
   const confirmableEnd = useRef<HTMLDivElement>(null);
@@ -41,13 +38,14 @@ export const Extensions: FunctionComponent<{
   }, [confirmableExtension, confirmableEnd]);
 
   const uninstallExtension = async (extension: SNComponent) => {
-    application.alertService.confirm(
-      'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
-      'Uninstall Extension?',
-      'Uninstall',
-      ButtonType.Danger,
-      'Cancel'
-    )
+    application.alertService
+      .confirm(
+        'Are you sure you want to uninstall this extension? Note that extensions managed by your subscription will automatically be re-installed on application restart.',
+        'Uninstall Extension?',
+        'Uninstall',
+        ButtonType.Danger,
+        'Cancel'
+      )
       .then(async (shouldRemove: boolean) => {
         if (shouldRemove) {
           await application.deleteItem(extension);
@@ -84,41 +82,46 @@ export const Extensions: FunctionComponent<{
     setExtensions(loadExtensions(application));
   };
 
-  const visibleExtensions = extensions
-    .filter((extension) => {
-      return extension.package_info != undefined && !['modal', 'rooms'].includes(extension.area);
-    });
+  const visibleExtensions = extensions.filter((extension) => {
+    return (
+      extension.package_info != undefined &&
+      !['modal', 'rooms'].includes(extension.area)
+    );
+  });
 
   return (
     <div className={className}>
-      {visibleExtensions.length > 0 &&
+      {visibleExtensions.length > 0 && (
         <div>
-          {
-            visibleExtensions
-              .sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
-              .map((extension, i) => (
-                <ExtensionItem
-                  key={extension.uuid}
-                  application={application}
-                  extension={extension}
-                  latestVersion={extensionsLatestVersions.getVersion(extension)}
-                  first={i === 0}
-                  uninstall={uninstallExtension}
-                  toggleActivate={toggleActivateExtension} />
-              ))
-          }
+          {visibleExtensions
+            .sort((e1, e2) =>
+              e1.name?.toLowerCase().localeCompare(e2.name?.toLowerCase())
+            )
+            .map((extension, i) => (
+              <ExtensionItem
+                key={extension.uuid}
+                application={application}
+                extension={extension}
+                latestVersion={extensionsLatestVersions.getVersion(extension)}
+                first={i === 0}
+                uninstall={uninstallExtension}
+                toggleActivate={toggleActivateExtension}
+              />
+            ))}
         </div>
-      }
+      )}
 
       <div>
-        {!confirmableExtension &&
+        {!confirmableExtension && (
           <PreferencesSegment>
             <Title>Install Custom Extension</Title>
             <div className="min-h-2" />
             <DecoratedInput
               placeholder={'Enter Extension URL'}
               text={customUrl}
-              onChange={(value) => { setCustomUrl(value); }}
+              onChange={(value) => {
+                setCustomUrl(value);
+              }}
             />
             <div className="min-h-2" />
             <Button
@@ -128,8 +131,8 @@ export const Extensions: FunctionComponent<{
               onClick={() => submitExtensionUrl(customUrl)}
             />
           </PreferencesSegment>
-        }
-        {confirmableExtension &&
+        )}
+        {confirmableExtension && (
           <PreferencesSegment>
             <ConfirmCustomExtension
               component={confirmableExtension}
@@ -137,7 +140,7 @@ export const Extensions: FunctionComponent<{
             />
             <div ref={confirmableEnd} />
           </PreferencesSegment>
-        }
+        )}
       </div>
     </div>
   );