Improve loading animation when switching release details (#2367)

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/api/endpoints/helm-releases.api.ts

@@ -20,7 +20,6 @@
  */
 
 import jsYaml from "js-yaml";
-import { compile } from "path-to-regexp";
 import { autoBind, formatDuration } from "../../utils";
 import capitalize from "lodash/capitalize";
 import { apiBase } from "../index";
@@ -28,6 +27,7 @@ import { helmChartStore } from "../../components/+apps-helm-charts/helm-chart.st
 import type { ItemObject } from "../../item.store";
 import { KubeObject } from "../kube-object";
 import type { JsonApiData } from "../json-api";
+import { buildURLPositional } from "../../../common/utils/buildUrl";
 
 interface IReleasePayload {
   name: string;
@@ -83,12 +83,16 @@ export interface IReleaseRevision {
   description: string;
 }
 
-const endpoint = compile(`/v2/releases/:namespace?/:name?`) as (
-  params?: {
-    namespace?: string;
-    name?: string;
-  }
-) => string;
+type EndpointParams = {}
+  | { namespace: string }
+  | { namespace: string, name: string }
+  | { namespace: string, name: string, route: string };
+
+interface EndpointQuery {
+  all?: boolean;
+}
+
+const endpoint = buildURLPositional<EndpointParams, EndpointQuery>("/v2/releases/:namespace?/:name?/:route?");
 
 export async function listReleases(namespace?: string): Promise<HelmRelease[]> {
   const releases = await apiBase.get<HelmRelease[]>(endpoint({ namespace }));
@@ -134,25 +138,25 @@ export async function deleteRelease(name: string, namespace: string): Promise<Js
 }
 
 export async function getReleaseValues(name: string, namespace: string, all?: boolean): Promise<string> {
-  const path = `${endpoint({ name, namespace })}/values${all? "?all": ""}`;
+  const route = "values";
+  const path = endpoint({ name, namespace, route }, { all });
 
   return apiBase.get<string>(path);
 }
 
 export async function getReleaseHistory(name: string, namespace: string): Promise<IReleaseRevision[]> {
-  const path = `${endpoint({ name, namespace })}/history`;
+  const route = "history";
+  const path = endpoint({ name, namespace, route });
 
   return apiBase.get(path);
 }
 
 export async function rollbackRelease(name: string, namespace: string, revision: number): Promise<JsonApiData> {
-  const path = `${endpoint({ name, namespace })}/rollback`;
+  const route = "rollback";
+  const path = endpoint({ name, namespace, route });
+  const data = { revision };
 
-  return apiBase.put(path, {
-    data: {
-      revision
-    }
-  });
+  return apiBase.put(path, { data });
 }
 
 export interface HelmRelease {
@@ -210,12 +214,7 @@ export class HelmRelease implements ItemObject {
   getVersion() {
     const versions = this.chart.match(/(?<=-)(v?\d+)[^-].*$/);
 
-    if (versions) {
-      return versions[0];
-    }
-    else {
-      return "";
-    }
+    return versions?.[0] ?? "";
   }
 
   getUpdated(humanize = true, compact = true) {

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

@@ -58,32 +58,35 @@ export class ReleaseDetails extends Component<Props> {
   @observable details: IReleaseDetails;
   @observable values = "";
   @observable valuesLoading = false;
-  @observable userSuppliedOnly = false;
+  @observable showOnlyUserSuppliedValues = false;
   @observable saving = false;
   @observable releaseSecret: Secret;
 
-  @disposeOnUnmount
-  releaseSelector = reaction(() => this.props.release, release => {
-    if (!release) return;
-    this.loadDetails();
-    this.loadValues();
-    this.releaseSecret = null;
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.props.release, release => {
+        if (!release) return;
+        this.loadDetails();
+        this.loadValues();
+        this.releaseSecret = null;
+      }),
+      reaction(() => secretsStore.getItems(), () => {
+        if (!this.props.release) return;
+        const { getReleaseSecret } = releaseStore;
+        const { release } = this.props;
+        const secret = getReleaseSecret(release);
+
+        if (this.releaseSecret) {
+          if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
+          this.loadDetails();
+        }
+        this.releaseSecret = secret;
+      }),
+      reaction(() => this.showOnlyUserSuppliedValues, () => {
+        this.loadValues();
+      }),
+    ]);
   }
-  );
-
-  @disposeOnUnmount
-  secretWatcher = reaction(() => secretsStore.getItems(), () => {
-    if (!this.props.release) return;
-    const { getReleaseSecret } = releaseStore;
-    const { release } = this.props;
-    const secret = getReleaseSecret(release);
-
-    if (this.releaseSecret) {
-      if (isEqual(this.releaseSecret.getLabels(), secret.getLabels())) return;
-      this.loadDetails();
-    }
-    this.releaseSecret = secret;
-  });
 
   constructor(props: Props) {
     super(props);
@@ -100,10 +103,15 @@ export class ReleaseDetails extends Component<Props> {
   async loadValues() {
     const { release } = this.props;
 
-    this.values = "";
-    this.valuesLoading = true;
-    this.values = (await getReleaseValues(release.getName(), release.getNs(), !this.userSuppliedOnly)) ?? "";
-    this.valuesLoading = false;
+    try {
+      this.valuesLoading = true;
+      this.values = (await getReleaseValues(release.getName(), release.getNs(), !this.showOnlyUserSuppliedValues)) ?? "";
+    } catch (error) {
+      Notifications.error(`Failed to load values for ${release.getName()}: ${error}`);
+      this.values = "";
+    } finally {
+      this.valuesLoading = false;
+    }
   }
 
   updateValues = async () => {
@@ -146,21 +154,19 @@ export class ReleaseDetails extends Component<Props> {
         <div className="flex column gaps">
           <Checkbox
             label="User-supplied values only"
-            value={this.userSuppliedOnly}
-            onChange={values => {
-              this.userSuppliedOnly = values;
-              this.loadValues();
-            }}
+            value={this.showOnlyUserSuppliedValues}
+            onChange={value => this.showOnlyUserSuppliedValues = value}
             disabled={valuesLoading}
           />
-          {valuesLoading
-            ? <Spinner />
-            : <AceEditor
-              mode="yaml"
-              value={values}
-              onChange={values => this.values = values}
-            />
-          }
+          <AceEditor
+            mode="yaml"
+            value={values}
+            onChange={text => this.values = text}
+            className={cssNames({ loading: valuesLoading })}
+            readOnly={valuesLoading || this.showOnlyUserSuppliedValues}
+          >
+            {valuesLoading && <Spinner center />}
+          </AceEditor>
           <Button
             primary
             label="Save"

src/renderer/components/ace-editor/ace-editor.scss

@@ -30,6 +30,19 @@
     border: 1px solid gainsboro;
   }
 
+  &.loading {
+    pointer-events: none;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: transparentize(white, .85);
+    }
+  }
+
   > .editor {
     position: absolute;
     width: inherit;
@@ -76,4 +89,4 @@
   .ace_comment {
     color: var(--dockEditorComment);
   }
-}
+}

src/renderer/components/ace-editor/ace-editor.tsx

@@ -169,11 +169,12 @@ export class AceEditor extends React.Component<Props, State> {
   }
 
   render() {
-    const { className, hidden } = this.props;
+    const { className, hidden, children } = this.props;
 
     return (
       <div className={cssNames("AceEditor", className, { hidden })}>
         <div className="editor" ref={e => this.elem = e}/>
+        {children}
       </div>
     );
   }