Catch and display errors for release details (#3905)

src/renderer/components/+apps-releases/release-details.scss

@@ -26,6 +26,11 @@
     align-items: center;
   }
 
+  .loading-error {
+    color: red;
+    text-align: center;
+  }
+
   .status {
     @include release-status-bgs;
   }

src/renderer/components/+apps-releases/release-details.tsx

@@ -56,12 +56,13 @@ interface Props {
 
 @observer
 export class ReleaseDetails extends Component<Props> {
-  @observable details: IReleaseDetails;
+  @observable details: IReleaseDetails | null = null;
   @observable values = "";
   @observable valuesLoading = false;
   @observable showOnlyUserSuppliedValues = true;
   @observable saving = false;
   @observable releaseSecret: Secret;
+  @observable error?: string = undefined;
 
   componentDidMount() {
     disposeOnUnmount(this, [
@@ -96,9 +97,13 @@ export class ReleaseDetails extends Component<Props> {
 
   async loadDetails() {
     const { release } = this.props;
-
-    this.details = null;
-    this.details = await getRelease(release.getName(), release.getNs());
+    
+    try {
+      this.details = null;
+      this.details = await getRelease(release.getName(), release.getNs());
+    } catch (error) {
+      this.error = `Failed to get release details: ${error}`;
+    }
   }
 
   async loadValues() {
@@ -237,11 +242,18 @@ export class ReleaseDetails extends Component<Props> {
 
   renderContent() {
     const { release } = this.props;
-    const { details } = this;
 
     if (!release) return null;
 
-    if (!details) {
+    if (this.error) {
+      return (
+        <div className="loading-error">
+          {this.error}
+        </div>
+      );
+    }
+
+    if (!this.details) {
       return <Spinner center/>;
     }