feat(helm): helm actions [r8s-259] (#715)

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

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

@@ -1,4 +1,5 @@
 import { useCurrentStateAndParams } from '@uirouter/react';
+import { useQueryClient } from '@tanstack/react-query';
 
 import helm from '@/assets/ico/vendor/helm.svg?c';
 import { PageHeader } from '@/react/components/PageHeader';
@@ -15,14 +16,25 @@ import { HelmSummary } from './HelmSummary';
 import { ReleaseTabs } from './ReleaseDetails/ReleaseTabs';
 import { useHelmRelease } from './queries/useHelmRelease';
 import { ChartActions } from './ChartActions/ChartActions';
+import { HelmRevisionList } from './HelmRevisionList';
+import { HelmRevisionListSheet } from './HelmRevisionListSheet';
+import { useHelmHistory } from './queries/useHelmHistory';
 
 export function HelmApplicationView() {
   const environmentId = useEnvironmentId();
+  const queryClient = useQueryClient();
   const { params } = useCurrentStateAndParams();
-  const { name, namespace } = params;
+  const { name, namespace, revision } = params;
+  const helmHistoryQuery = useHelmHistory(environmentId, name, namespace);
+  const latestRevision = helmHistoryQuery.data?.[0]?.version;
+  const earlistRevision =
+    helmHistoryQuery.data?.[helmHistoryQuery.data.length - 1]?.version;
+  // when loading the page fresh, the revision is undefined, so use the latest revision
+  const selectedRevision = revision ? parseInt(revision, 10) : latestRevision;
 
   const helmReleaseQuery = useHelmRelease(environmentId, name, namespace, {
     showResources: true,
+    revision: selectedRevision,
   });
 
   return (
@@ -38,26 +50,61 @@ export function HelmApplicationView() {
 
       <div className="row">
         <div className="col-sm-12">
-          <Widget>
-            {name && (
-              <WidgetTitle icon={helm} title={name}>
-                <Authorized authorizations="K8sApplicationsW">
-                  <ChartActions
-                    environmentId={environmentId}
-                    releaseName={name}
-                    namespace={namespace}
-                    currentRevision={helmReleaseQuery.data?.version}
+          <Widget className="overflow-hidden">
+            <div className="flex">
+              <div className="flex-1 min-w-0">
+                {name && (
+                  <WidgetTitle icon={helm} title={name}>
+                    <div className="flex gap-2 flex-wrap">
+                      <div className="2xl:hidden">
+                        <HelmRevisionListSheet
+                          currentRevision={helmReleaseQuery.data?.version}
+                          history={helmHistoryQuery.data}
+                        />
+                      </div>
+                      <Authorized authorizations="K8sApplicationsW">
+                        <ChartActions
+                          environmentId={environmentId}
+                          releaseName={String(name)}
+                          namespace={String(namespace)}
+                          latestRevision={latestRevision ?? 1}
+                          earlistRevision={earlistRevision}
+                          selectedRevision={selectedRevision}
+                          release={helmReleaseQuery.data}
+                          updateRelease={(updatedRelease: HelmRelease) => {
+                            queryClient.setQueryData(
+                              [
+                                environmentId,
+                                'helm',
+                                'releases',
+                                namespace,
+                                name,
+                                true,
+                              ],
+                              updatedRelease
+                            );
+                          }}
+                        />
+                      </Authorized>
+                    </div>
+                  </WidgetTitle>
+                )}
+                <WidgetBody className="!pt-2.5">
+                  <HelmDetails
+                    isLoading={helmReleaseQuery.isInitialLoading}
+                    isError={helmReleaseQuery.isError}
+                    release={helmReleaseQuery.data}
+                    selectedRevision={selectedRevision}
                   />
-                </Authorized>
-              </WidgetTitle>
-            )}
-            <WidgetBody>
-              <HelmDetails
-                isLoading={helmReleaseQuery.isInitialLoading}
-                isError={helmReleaseQuery.isError}
-                release={helmReleaseQuery.data}
-              />
-            </WidgetBody>
+                </WidgetBody>
+              </div>
+              <div className="w-80 hidden 2xl:!block">
+                <HelmRevisionList
+                  currentRevision={helmReleaseQuery.data?.version}
+                  history={helmHistoryQuery.data}
+                />
+              </div>
+            </div>
           </Widget>
         </div>
       </div>
@@ -68,10 +115,16 @@ export function HelmApplicationView() {
 type HelmDetailsProps = {
   isLoading: boolean;
   isError: boolean;
-  release: HelmRelease | undefined;
+  selectedRevision?: number;
+  release?: HelmRelease;
 };
 
-function HelmDetails({ isLoading, isError, release: data }: HelmDetailsProps) {
+function HelmDetails({
+  isLoading,
+  isError,
+  release,
+  selectedRevision,
+}: HelmDetailsProps) {
   if (isLoading) {
     return <Loading />;
   }
@@ -82,16 +135,16 @@ function HelmDetails({ isLoading, isError, release: data }: HelmDetailsProps) {
     );
   }
 
-  if (!data) {
+  if (!release || !selectedRevision) {
     return <Alert color="error" title="No Helm application details found" />;
   }
 
   return (
     <>
-      <HelmSummary release={data} />
+      <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={data} />
+        <ReleaseTabs release={release} selectedRevision={selectedRevision} />
       </Card>
     </>
   );