chore(helm): Convert helm details view to react (#476)

app/react/kubernetes/helm/HelmApplicationView/HelmApplicationView.tsx

@@ -0,0 +1,79 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { PageHeader } from '@/react/components/PageHeader';
+import { Widget, WidgetBody, WidgetTitle } from '@/react/components/Widget';
+import helm from '@/assets/ico/vendor/helm.svg?c';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { ViewLoading } from '@@/ViewLoading';
+import { Alert } from '@@/Alert';
+
+import { useHelmRelease } from './queries/useHelmRelease';
+
+export function HelmApplicationView() {
+  const { params } = useCurrentStateAndParams();
+  const environmentId = useEnvironmentId();
+
+  const name = params.name as string;
+  const namespace = params.namespace as string;
+
+  const {
+    data: release,
+    isLoading,
+    error,
+  } = useHelmRelease(environmentId, name, namespace);
+
+  if (isLoading) {
+    return <ViewLoading />;
+  }
+
+  if (error || !release) {
+    return (
+      <Alert color="error" title="Failed to load Helm application details" />
+    );
+  }
+
+  return (
+    <>
+      <PageHeader
+        title="Helm details"
+        breadcrumbs={[
+          { label: 'Applications', link: 'kubernetes.applications' },
+          name,
+        ]}
+        reload
+      />
+
+      <div className="row">
+        <div className="col-sm-12">
+          <Widget>
+            <WidgetTitle icon={helm} title="Release" />
+            <WidgetBody>
+              <table className="table">
+                <tbody>
+                  <tr>
+                    <td className="!border-none w-40">Name</td>
+                    <td
+                      className="!border-none min-w-[140px]"
+                      data-cy="k8sAppDetail-appName"
+                    >
+                      {release.name}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="!border-t">Chart</td>
+                    <td className="!border-t">{release.chart}</td>
+                  </tr>
+                  <tr>
+                    <td>App version</td>
+                    <td>{release.app_version}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </WidgetBody>
+          </Widget>
+        </div>
+      </div>
+    </>
+  );
+}