fix(ui): Add Error Boundary around Extensions and comply with new Ext…

…ensions API (#7215) * fix: Add error boundary around Extensions and change path where UI looks for extensions Signed-off-by: Remington Breeze <remington@breeze.software> * Add error message to error boundary Signed-off-by: Remington Breeze <remington@breeze.software>
argoproj · Sep 14, 2021 · b6c458e · b6c458e
1 parent 2147ed3
commit b6c458e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -2,6 +2,7 @@ import {DataLoader, Tab, Tabs} from 'argo-ui';
 import {useData} from 'argo-ui/v2';
 import * as React from 'react';
 import {EventsList, YamlEditor} from '../../../shared/components';
+import {ErrorBoundary} from '../../../shared/components/error-boundary/error-boundary';
 import {Context} from '../../../shared/context';
 import {Application, ApplicationTree, AppSourceType, Event, RepoAppDetails, ResourceNode, State, SyncStatuses} from '../../../shared/models';
 import {services} from '../../../shared/services';
@@ -119,9 +120,9 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                 title: 'More',
                 key: 'extension',
                 content: (
-                    <div>
+                    <ErrorBoundary message={`Something went wrong with Extension for ${state.kind}`}>
                         <ExtensionComponent tree={tree} resource={state} />
-                    </div>
+                    </ErrorBoundary>
                 )
             });
         }

diff --git a/ui/src/app/shared/components/error-boundary/error-boundary.tsx b/ui/src/app/shared/components/error-boundary/error-boundary.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export class ErrorBoundary extends React.Component<{message?: string}, {hasError: boolean}> {
+    constructor(props: any) {
+        super(props);
+        this.state = {hasError: false};
+    }
+
+    static getDerivedStateFromError(error: React.ErrorInfo) {
+        return {hasError: true};
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return <h1>{this.props.message ? this.props.message : 'Something went wrong.'}</h1>;
+        }
+
+        return this.props.children;
+    }
+}
diff --git a/ui/src/app/shared/services/extensions-service.ts b/ui/src/app/shared/services/extensions-service.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {ApplicationTree, State} from '../models';
 
-const extensions: {[key: string]: Extension} = {};
+const extensions: {resources: {[key: string]: Extension}} = {resources: {}};
 const cache = new Map<string, Promise<Extension>>();
 
 export interface Extension {
@@ -15,14 +15,14 @@ export interface ExtensionComponentProps {
 
 export class ExtensionsService {
     public async loadResourceExtension(group: string, kind: string): Promise<Extension> {
-        const key = `${group}-${kind}`;
+        const key = `${group}/${kind}`;
         const res =
             cache.get(key) ||
             new Promise<Extension>((resolve, reject) => {
                 const script = document.createElement('script');
-                script.src = `extensions/${group}/${kind}/ui/extensions.js`;
+                script.src = `extensions/resources/${group}/${kind}/ui/extensions.js`;
                 script.onload = () => {
-                    const ext = extensions[key];
+                    const ext = extensions.resources[key];
                     if (!ext) {
                         reject(`Failed to load extension for ${group}/${kind}`);
                     } else {