refactor(namespace): migrate namespace edit to react [r8s-125] (#38)

app/react/kubernetes/namespaces/ItemView/NamespaceView.tsx

@@ -0,0 +1,82 @@
+import { useCurrentStateAndParams } from '@uirouter/react';
+import { AlertTriangle, Code, Layers, History } from 'lucide-react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { PageHeader } from '@@/PageHeader';
+import { findSelectedTabIndex, Tab, WidgetTabs } from '@@/Widget/WidgetTabs';
+import { Badge } from '@@/Badge';
+import { Icon } from '@@/Icon';
+
+import { useEventWarningsCount } from '../../queries/useEvents';
+import { NamespaceYAMLEditor } from '../components/NamespaceYamlEditor';
+import { ResourceEventsDatatable } from '../../components/EventsDatatable/ResourceEventsDatatable';
+
+import { UpdateNamespaceForm } from './UpdateNamespaceForm';
+import { NamespaceAppsDatatable } from './NamespaceAppsDatatable';
+
+export function NamespaceView() {
+  const stateAndParams = useCurrentStateAndParams();
+  const {
+    params: { id: namespace },
+  } = stateAndParams;
+
+  const environmentId = useEnvironmentId();
+  const eventWarningCount = useEventWarningsCount(environmentId, namespace);
+
+  const tabs: Tab[] = [
+    {
+      name: 'Namespace',
+      icon: Layers,
+      widget: <UpdateNamespaceForm />,
+      selectedTabParam: 'namespace',
+    },
+    {
+      name: (
+        <div className="flex items-center gap-x-2">
+          Events
+          {eventWarningCount >= 1 && (
+            <Badge type="warnSecondary">
+              <Icon icon={AlertTriangle} className="!mr-1" />
+              {eventWarningCount}
+            </Badge>
+          )}
+        </div>
+      ),
+      icon: History,
+      widget: (
+        <ResourceEventsDatatable
+          namespace={namespace}
+          storageKey="kubernetes.namespace.events"
+          noWidget={false}
+        />
+      ),
+      selectedTabParam: 'events',
+    },
+    {
+      name: 'YAML',
+      icon: Code,
+      widget: <NamespaceYAMLEditor />,
+      selectedTabParam: 'YAML',
+    },
+  ];
+  const currentTabIndex = findSelectedTabIndex(stateAndParams, tabs);
+
+  return (
+    <>
+      <PageHeader
+        title="Namespace details"
+        breadcrumbs={[
+          { label: 'Namespaces', link: 'kubernetes.resourcePools' },
+          namespace,
+        ]}
+        reload
+      />
+      <>
+        <WidgetTabs tabs={tabs} currentTabIndex={currentTabIndex} />
+        {tabs[currentTabIndex].widget}
+        <NamespaceAppsDatatable namespace={namespace} />
+      </>
+    </>
+  );
+}