feat(helm): update helm view [r8s-256] (#582)

Co-authored-by: Cara Ryan <cara.ryan@portainer.io>
Co-authored-by: James Player <james.player@portainer.io>
Co-authored-by: stevensbkang <skan070@gmail.com>

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

@@ -1,12 +1,21 @@
 import { useCurrentStateAndParams } from '@uirouter/react';
 
+import helm from '@/assets/ico/vendor/helm.svg?c';
 import { PageHeader } from '@/react/components/PageHeader';
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { EnvironmentId } from '@/react/portainer/environments/types';
 
-import { HelmDetailsWidget } from './HelmDetailsWidget';
+import { WidgetTitle, WidgetBody, Widget, Loading } from '@@/Widget';
+import { Card } from '@@/Card';
+import { Alert } from '@@/Alert';
+
+import { HelmSummary } from './HelmSummary';
+import { ReleaseTabs } from './ReleaseDetails/ReleaseTabs';
+import { useHelmRelease } from './queries/useHelmRelease';
 
 export function HelmApplicationView() {
+  const environmentId = useEnvironmentId();
   const { params } = useCurrentStateAndParams();
-
   const { name, namespace } = params;
 
   return (
@@ -22,9 +31,58 @@ export function HelmApplicationView() {
 
       <div className="row">
         <div className="col-sm-12">
-          <HelmDetailsWidget name={name} namespace={namespace} />
+          <Widget>
+            {name && <WidgetTitle icon={helm} title={name} />}
+            <WidgetBody className="!pt-1">
+              <HelmDetails
+                name={name}
+                namespace={namespace}
+                environmentId={environmentId}
+              />
+            </WidgetBody>
+          </Widget>
         </div>
       </div>
     </>
   );
 }
+
+type HelmDetailsProps = {
+  name: string;
+  namespace: string;
+  environmentId: EnvironmentId;
+};
+
+function HelmDetails({ name, namespace, environmentId }: HelmDetailsProps) {
+  const {
+    data: release,
+    isInitialLoading,
+    isError,
+  } = useHelmRelease(environmentId, name, namespace, {
+    showResources: true,
+  });
+
+  if (isInitialLoading) {
+    return <Loading />;
+  }
+
+  if (isError) {
+    return (
+      <Alert color="error" title="Failed to load Helm application details" />
+    );
+  }
+
+  if (!release) {
+    return <Alert color="error" title="No Helm application details found" />;
+  }
+
+  return (
+    <>
+      <HelmSummary release={release} />
+      <div className="my-6 h-[1px] w-full bg-gray-5 th-dark:bg-gray-7 th-highcontrast:bg-white" />
+      <Card className="bg-inherit">
+        <ReleaseTabs release={release} />
+      </Card>
+    </>
+  );
+}