Fix Devfile Registry editor views for cases where the current Devfile Registry is removed

This will show an error instead of Devfile search form, a Devfile selection dialog, etc. and will
ask if a user wants to close the view when the current Devfile Registry is removed.

Signed-off-by: Victor Rubezhny <vrubezhny@redhat.com>

Author: vrubezhny

src/webview/common/devfileSearch.tsx

@@ -37,6 +37,7 @@ import { DevfileData, DevfileInfo, DevfileRegistryInfo } from '../../devfile-reg
 import { TemplateProjectIdentifier } from '../common/devfile';
 import { DevfileExplanation } from './devfileExplanation';
 import { DevfileListItem } from './devfileListItem';
+import { ErrorPage } from './errorPage';
 import { LoadScreen } from './loading';
 import { vsDarkCodeMirrorTheme, vsLightCodeMirrorTheme } from './vscode-theme';
 
@@ -648,13 +649,15 @@ export function DevfileSearch(props: DevfileSearchProps) {
     const [searchText, setSearchText] = React.useState('');
 
     const [showMore, setShowMore] = React.useState(false);
+    const [createComponentErrorMessage, setCreateComponentErrorMessage] = React.useState('');
 
     function respondToMessage(messageEvent: MessageEvent) {
         const message = messageEvent.data as Message;
         switch (message.action) {
             case 'devfileRegistries': {
                 setDevfileRegistries((_devfileRegistries) => message.data);
                 setDevfileInfos((_devfileInfos) => []);
+                setSelectedDevfileInfo((_unused) => undefined);
                 setSomeDevfileInfoRetrieved(_unused => false);
                 window.vscodeApi.postMessage({ action: 'getDevfileInfos' });
                 break;
@@ -672,6 +675,11 @@ export function DevfileSearch(props: DevfileSearchProps) {
                 setDevfileTags((_devfileTags) => message.data);
                 break;
             }
+            case 'createComponentFailed': {
+                setSomeDevfileInfoRetrieved(_unused => true);
+                setCreateComponentErrorMessage(message.data);
+                break;
+            }
             default:
                 break;
         }
@@ -758,6 +766,18 @@ export function DevfileSearch(props: DevfileSearchProps) {
         return <LoadScreen title="Retrieving list of Devfile Tags..." />;
     }
 
+    if (createComponentErrorMessage) {
+        return (
+            <>
+                <Stack direction="column" height="100%" spacing={0.5}>
+                    <ErrorPage
+                        message={`${createComponentErrorMessage}`}
+                    />
+                </Stack>
+            </>
+        );
+    }
+
     const activeRegistries = registryEnabled //
         .filter((entry) => entry.enabled) //
         .map((entry) => entry.registryName);

src/webview/create-component/createComponentLoader.ts

@@ -87,7 +87,7 @@ export default class CreateComponentLoader {
             void sendUpdatedRegistries(CreateComponentLoader.panel);
         });
 
-        const capabiliiesySubscription = ComponentTypesView.instance.subject.subscribe(() => {
+        const capabilitiesSubscription = ComponentTypesView.instance.subject.subscribe(() => {
             sendUpdatedCapabilities(CreateComponentLoader.panel);
         });
 
@@ -98,7 +98,7 @@ export default class CreateComponentLoader {
         panel.onDidDispose(() => {
             void sendTelemetry('newComponentClosed');
             tagsSubscription.unsubscribe();
-            capabiliiesySubscription.unsubscribe();
+            capabilitiesSubscription.unsubscribe();
             registriesSubscription.unsubscribe();
             colorThemeDisposable.dispose();
             messageHandlerDisposable.dispose();

src/webview/devfile-registry/registryViewLoader.ts

@@ -166,11 +166,39 @@ export default class RegistryViewLoader {
         return vscode.extensions.getExtension(ExtensionID).extensionPath
     }
 
+    private static doUpdateRegistries() {
+        void sendUpdatedRegistries(RegistryViewLoader.panel).then((registries) => {
+            if (RegistryViewLoader.url) { // Update title if registry name for the URL provided has changed
+                const registryName = registries.find((registry) => registry.url === RegistryViewLoader.url)?.name;
+                if (registryName) {
+                    RegistryViewLoader.panel.title = `Devfile Registry - ${registryName}`;
+                } else {
+                    void RegistryViewLoader.panel.webview.postMessage({
+                        action: 'createComponentFailed',
+                        data: `No Devfile registries available for ${RegistryViewLoader.url}`
+                    });
+                    void vscode.window.showErrorMessage(
+                            `
+                            No Devfile registry available.
+                            Do you want to close the '${RegistryViewLoader.panel.title}' view?
+                            `,
+                            'Yes', 'No')
+                        .then((answer) => {
+                            if (answer === 'Yes') {
+                                void RegistryViewLoader.closeRegistryInWebview();
+                            }
+                        });
+                }
+            }
+        })
+    }
+
     static async loadView(title: string, url?: string): Promise<vscode.WebviewPanel> {
         const localResourceRoot = vscode.Uri.file(path.join(RegistryViewLoader.extensionPath, 'out', 'devfile-registry', 'app'));
         if (RegistryViewLoader.panel) {
             if (RegistryViewLoader.url !== url) {
                 RegistryViewLoader.url = url;
+                RegistryViewLoader.doUpdateRegistries();
             }
             // If we already have a panel, show it in the target column
             RegistryViewLoader.panel.reveal(vscode.ViewColumn.One);
@@ -187,14 +215,7 @@ export default class RegistryViewLoader {
             const messageDisposable = RegistryViewLoader.panel.webview.onDidReceiveMessage(devfileRegistryViewerMessageListener);
 
             const registriesSubscription = ComponentTypesView.instance.subject.subscribe(() => {
-                void sendUpdatedRegistries(RegistryViewLoader.panel).then((registries) => {
-                        if (RegistryViewLoader.url) { // Update title if registry name for the URL provided has changed
-                            const registryName = registries.find((registry) => registry.url === RegistryViewLoader.url)?.name;
-                            if (registryName) {
-                                RegistryViewLoader.panel.title = `Devfile Registry - ${registryName}`;
-                            }
-                        }
-                    })
+                RegistryViewLoader.doUpdateRegistries();
             });
 
             const capabiliiesySubscription = ComponentTypesView.instance.subject.subscribe(() => {