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/ReleaseDetails/ResourcesTable/columns/actions.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { CellContext } from '@tanstack/react-table';
+import { FileText } from 'lucide-react';
+
+import { Button } from '@@/buttons';
+import { Icon } from '@@/Icon';
+
+import { ResourceRow } from '../types';
+import { DescribeModal } from '../DescribeModal';
+
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.accessor((row) => row.status.label, {
+  header: 'Actions',
+  id: 'actions',
+  cell: Cell,
+  enableSorting: false,
+});
+
+function Cell({ row }: CellContext<ResourceRow, string>) {
+  const { describe } = row.original;
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <>
+      <Button
+        color="link"
+        data-cy="helm-resource-describe"
+        onClick={() => setModalOpen(true)}
+        className="pl-0 !ml-0"
+      >
+        <Icon icon={FileText} />
+        Describe
+      </Button>
+
+      {modalOpen && (
+        <DescribeModal
+          name={describe.name}
+          resourceType={describe.resourceType}
+          namespace={describe.namespace}
+          onDismiss={() => setModalOpen(false)}
+        />
+      )}
+    </>
+  );
+}

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { ResourceRow } from '../types';
+
+export const columnHelper = createColumnHelper<ResourceRow>();

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/index.ts

@@ -0,0 +1,7 @@
+import { name } from './name';
+import { resourceType } from './resourceType';
+import { status } from './status';
+import { statusMessage } from './statusMessage';
+import { actions } from './actions';
+
+export const columns = [name, resourceType, status, statusMessage, actions];

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/name.tsx

@@ -0,0 +1,33 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { Link } from '@@/Link';
+
+import { ResourceRow } from '../types';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor((row) => row.name.label, {
+  header: 'Name',
+  cell: Cell,
+  id: 'name',
+});
+
+function Cell({ row }: CellContext<ResourceRow, string>) {
+  const { name } = row.original;
+
+  if (name.link && name.link.to) {
+    return (
+      <Link
+        to={name.link.to}
+        params={name.link.params}
+        title={name.label}
+        className="w-fit max-w-xs truncate xl:max-w-sm 2xl:max-w-md"
+        data-cy={`helm-resource-link-${name.label}`}
+      >
+        {name.label}
+      </Link>
+    );
+  }
+
+  return name.label;
+}

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/resourceType.tsx

@@ -0,0 +1,6 @@
+import { columnHelper } from './helper';
+
+export const resourceType = columnHelper.accessor((row) => row.resourceType, {
+  header: 'Resource type',
+  id: 'resourceType',
+});

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/status.tsx

@@ -0,0 +1,18 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { StatusBadge } from '@@/StatusBadge';
+
+import { ResourceRow } from '../types';
+
+import { columnHelper } from './helper';
+
+export const status = columnHelper.accessor((row) => row.status.label, {
+  header: 'Status',
+  id: 'status',
+  cell: Cell,
+});
+
+function Cell({ row }: CellContext<ResourceRow, string>) {
+  const { status } = row.original;
+  return <StatusBadge color={status.type}>{status.label}</StatusBadge>;
+}

app/react/kubernetes/helm/HelmApplicationView/ReleaseDetails/ResourcesTable/columns/statusMessage.tsx

@@ -0,0 +1,11 @@
+import { columnHelper } from './helper';
+
+export const statusMessage = columnHelper.accessor((row) => row.statusMessage, {
+  header: 'Status message',
+  id: 'statusMessage',
+  cell: ({ row }) => (
+    <div className="whitespace-pre-wrap">
+      <span>{row.original.statusMessage || '-'}</span>
+    </div>
+  ),
+});