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

app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -26,6 +26,7 @@ import { Service } from '../../types';
 
 import { columns } from './columns';
 import { createStore } from './datatable-store';
+import { ServiceRowData } from './types';
 
 const storageKey = 'k8sServicesDatatable';
 const settingsStore = createStore(storageKey);
@@ -104,7 +105,7 @@ export function ServicesDatatable() {
 function useServicesRowData(
   services: Service[],
   namespaces?: Namespaces
-): Service[] {
+): ServiceRowData[] {
   return useMemo(
     () =>
       services.map((service) => ({
@@ -119,9 +120,12 @@ function useServicesRowData(
 
 // needed to apply custom styling to the row cells and not globally.
 // required in the AC's for this ticket.
-function servicesRenderRow(row: Row<Service>, highlightedItemId?: string) {
+function servicesRenderRow(
+  row: Row<ServiceRowData>,
+  highlightedItemId?: string
+) {
   return (
-    <Table.Row<Service>
+    <Table.Row<ServiceRowData>
       cells={row.getVisibleCells()}
       className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
         active: highlightedItemId === row.id,
@@ -136,7 +140,7 @@ interface SelectedService {
 }
 
 type TableActionsProps = {
-  selectedItems: Service[];
+  selectedItems: ServiceRowData[];
 };
 
 function TableActions({ selectedItems }: TableActionsProps) {

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx

@@ -4,7 +4,7 @@ import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
 import { Link } from '@@/Link';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -17,7 +17,7 @@ export const application = columnHelper.accessor(
   }
 );
 
-function Cell({ row, getValue }: CellContext<Service, string>) {
+function Cell({ row, getValue }: CellContext<ServiceRowData, string>) {
   const appName = getValue();
   const environmentId = useEnvironmentId();
 

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/externalIP.tsx

@@ -1,6 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { ExternalIPLink } from './ExternalIPLink';
 import { columnHelper } from './helper';
@@ -46,7 +46,7 @@ export const externalIP = columnHelper.accessor(
   }
 );
 
-function Cell({ row }: CellContext<Service, string>) {
+function Cell({ row }: CellContext<ServiceRowData, string>) {
   if (row.original.Type === 'ExternalName') {
     if (row.original.ExternalName) {
       const linkTo = `http://${row.original.ExternalName}`;
@@ -106,7 +106,7 @@ function Cell({ row }: CellContext<Service, string>) {
 
 // calculate the scheme based on the ports of the service
 // favour https over http.
-function getSchemeAndPort(svc: Service): [string, number] {
+function getSchemeAndPort(svc: ServiceRowData): [string, number] {
   let scheme = '';
   let servicePort = 0;
 

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/helper.ts

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

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx

@@ -4,7 +4,7 @@ import { filterHOC } from '@/react/components/datatables/Filter';
 
 import { Link } from '@@/Link';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -31,6 +31,9 @@ export const namespace = columnHelper.accessor('Namespace', {
     filter: filterHOC('Filter by namespace'),
   },
   enableColumnFilter: true,
-  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
-    filterValue.length === 0 || filterValue.includes(row.original.Namespace),
+  filterFn: (
+    row: Row<ServiceRowData>,
+    columnId: string,
+    filterValue: string[]
+  ) => filterValue.length === 0 || filterValue.includes(row.original.Namespace),
 });

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/type.tsx

@@ -2,7 +2,7 @@ import { Row } from '@tanstack/react-table';
 
 import { filterHOC } from '@@/datatables/Filter';
 
-import { Service } from '../../../types';
+import { ServiceRowData } from '../types';
 
 import { columnHelper } from './helper';
 
@@ -13,6 +13,9 @@ export const type = columnHelper.accessor('Type', {
     filter: filterHOC('Filter by type'),
   },
   enableColumnFilter: true,
-  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
-    filterValue.length === 0 || filterValue.includes(row.original.Type),
+  filterFn: (
+    row: Row<ServiceRowData>,
+    columnId: string,
+    filterValue: string[]
+  ) => filterValue.length === 0 || filterValue.includes(row.original.Type),
 });

app/react/kubernetes/services/ServicesView/ServicesDatatable/types.ts

@@ -0,0 +1,5 @@
+import { Service } from '../../types';
+
+export type ServiceRowData = Service & {
+  IsSystem: boolean;
+};