refactor(apps): migrate applications view to react [r8s-124] (#28)

app/react/kubernetes/applications/ListView/ApplicationsView.tsx

@@ -0,0 +1,54 @@
+import { BoxIcon, List } from 'lucide-react';
+import { useCurrentStateAndParams } from '@uirouter/react';
+
+import { usePublicSettings } from '@/react/portainer/settings/queries/usePublicSettings';
+
+import { PageHeader } from '@@/PageHeader';
+import { Tab, WidgetTabs, findSelectedTabIndex } from '@@/Widget/WidgetTabs';
+
+import { ApplicationsDatatable } from './ApplicationsDatatable';
+import { ApplicationsStacksDatatable } from './ApplicationsStacksDatatable';
+import { useKubeAppsTableStore } from './useKubeAppsTableStore';
+
+export function ApplicationsView() {
+  const tableState = useKubeAppsTableStore('kubernetes.applications', 'Name');
+  const hideStacksQuery = usePublicSettings({
+    select: (settings) =>
+      settings.GlobalDeploymentOptions.hideStacksFunctionality,
+  });
+  const hideStacks = hideStacksQuery.isLoading || !!hideStacksQuery.data;
+
+  const tabs: Tab[] = [
+    {
+      name: 'Applications',
+      icon: BoxIcon,
+      widget: <ApplicationsDatatable tableState={tableState} />,
+      selectedTabParam: 'applications',
+    },
+    {
+      name: 'Stacks',
+      icon: List,
+      widget: <ApplicationsStacksDatatable tableState={tableState} />,
+      selectedTabParam: 'stacks',
+    },
+  ];
+
+  const currentTabIndex = findSelectedTabIndex(
+    useCurrentStateAndParams(),
+    tabs
+  );
+
+  return (
+    <>
+      <PageHeader title="Application list" breadcrumbs="Applications" reload />
+      {hideStacks ? (
+        <ApplicationsDatatable tableState={tableState} hideStacks />
+      ) : (
+        <>
+          <WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
+          <div className="content">{tabs[currentTabIndex].widget}</div>
+        </>
+      )}
+    </>
+  );
+}