refactor(teams): migrate teams to react [EE-2273] (#6691)

closes [EE-2273]

app/react/components/datatables/ColumnVisibilityMenu.tsx

@@ -5,8 +5,6 @@ import { Columns } from 'react-feather';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 
-import { useTableContext } from './TableContainer';
-
 interface Props<D extends object> {
   columns: ColumnInstance<D>[];
   onChange: (value: string[]) => void;
@@ -18,8 +16,6 @@ export function ColumnVisibilityMenu<D extends object>({
   onChange,
   value,
 }: Props<D>) {
-  useTableContext();
-
   return (
     <Menu className="setting">
       {({ isExpanded }) => (

app/react/components/datatables/NameCell.tsx

@@ -0,0 +1,30 @@
+import { CellProps, Column } from 'react-table';
+
+import { Link } from '@@/Link';
+
+export function buildNameColumn<T extends Record<string, unknown>>(
+  nameKey: string,
+  idKey: string,
+  path: string
+) {
+  const name: Column<T> = {
+    Header: 'Name',
+    accessor: (row) => row[nameKey],
+    id: 'name',
+    Cell: NameCell,
+    disableFilters: true,
+    Filter: () => null,
+    canHide: false,
+    sortType: 'string',
+  };
+
+  return name;
+
+  function NameCell({ value: name, row }: CellProps<T, string>) {
+    return (
+      <Link to={path} params={{ id: row.original[idKey] }} title={name}>
+        {name}
+      </Link>
+    );
+  }
+}

app/react/components/datatables/Table.tsx

@@ -2,15 +2,15 @@ import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
 import { TableProps } from 'react-table';
 
-import { useTableContext, TableContainer } from './TableContainer';
+import { TableContainer } from './TableContainer';
 import { TableActions } from './TableActions';
 import { TableTitleActions } from './TableTitleActions';
+import { TableContent } from './TableContent';
 import { TableHeaderCell } from './TableHeaderCell';
 import { TableSettingsMenu } from './TableSettingsMenu';
 import { TableTitle } from './TableTitle';
 import { TableHeaderRow } from './TableHeaderRow';
 import { TableRow } from './TableRow';
-import { TableContent } from './TableContent';
 import { TableFooter } from './TableFooter';
 
 function MainComponent({
@@ -19,8 +19,6 @@ function MainComponent({
   role,
   style,
 }: PropsWithChildren<TableProps>) {
-  useTableContext();
-
   return (
     <div className="table-responsive">
       <table

app/react/components/datatables/TableActions.tsx

@@ -1,7 +1,5 @@
 import clsx from 'clsx';
-import { PropsWithChildren } from 'react';
-
-import { useTableContext } from './TableContainer';
+import { Children, PropsWithChildren } from 'react';
 
 interface Props {
   className?: string;
@@ -11,7 +9,9 @@ export function TableActions({
   children,
   className,
 }: PropsWithChildren<Props>) {
-  useTableContext();
+  if (Children.count(children) === 0) {
+    return null;
+  }
 
   return <div className={clsx('actionBar', className)}>{children}</div>;
 }

app/react/components/datatables/TableContainer.tsx

@@ -1,25 +1,13 @@
-import { createContext, PropsWithChildren, useContext } from 'react';
+import { PropsWithChildren } from 'react';
 
 import { Widget, WidgetBody } from '@@/Widget';
 
-const Context = createContext<null | boolean>(null);
-
-export function useTableContext() {
-  const context = useContext(Context);
-
-  if (context == null) {
-    throw new Error('Should be nested inside a TableContainer component');
-  }
-}
-
 export function TableContainer({ children }: PropsWithChildren<unknown>) {
   return (
-    <Context.Provider value>
-      <div className="datatable">
-        <Widget>
-          <WidgetBody className="no-padding">{children}</WidgetBody>
-        </Widget>
-      </div>
-    </Context.Provider>
+    <div className="datatable">
+      <Widget>
+        <WidgetBody className="no-padding">{children}</WidgetBody>
+      </Widget>
+    </div>
   );
 }

app/react/components/datatables/TableFooter.tsx

@@ -1,9 +1,5 @@
 import { PropsWithChildren } from 'react';
 
-import { useTableContext } from './TableContainer';
-
 export function TableFooter({ children }: PropsWithChildren<unknown>) {
-  useTableContext();
-
   return <footer className="footer">{children}</footer>;
 }

app/react/components/datatables/TableHeaderCell.tsx

@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import { PropsWithChildren, ReactNode } from 'react';
 import { TableHeaderProps } from 'react-table';
 
-import { useTableContext } from './TableContainer';
 import { TableHeaderSortIcons } from './TableHeaderSortIcons';
 import styles from './TableHeaderCell.module.css';
 
@@ -27,8 +26,6 @@ export function TableHeaderCell({
   canFilter,
   renderFilter,
 }: Props) {
-  useTableContext();
-
   return (
     <th role={role} style={style} className={className}>
       <div className="flex flex-row flex-nowrap h-full items-center gap-1">

app/react/components/datatables/TableHeaderRow.tsx

@@ -1,6 +1,5 @@
 import { HeaderGroup, TableHeaderProps } from 'react-table';
 
-import { useTableContext } from './TableContainer';
 import { TableHeaderCell } from './TableHeaderCell';
 
 interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
@@ -17,8 +16,6 @@ export function TableHeaderRow<
   role,
   style,
 }: Props<D> & TableHeaderProps) {
-  useTableContext();
-
   return (
     <tr className={className} role={role} style={style}>
       {headers.map((column) => (

app/react/components/datatables/TableRow.tsx

@@ -1,7 +1,5 @@
 import { Cell, TableRowProps } from 'react-table';
 
-import { useTableContext } from './TableContainer';
-
 interface Props<D extends Record<string, unknown> = Record<string, unknown>>
   extends Omit<TableRowProps, 'key'> {
   cells: Cell<D>[];
@@ -10,8 +8,6 @@ interface Props<D extends Record<string, unknown> = Record<string, unknown>>
 export function TableRow<
   D extends Record<string, unknown> = Record<string, unknown>
 >({ cells, className, role, style }: Props<D>) {
-  useTableContext();
-
   return (
     <tr className={className} role={role} style={style}>
       {cells.map((cell) => {

app/react/components/datatables/TableSettingsMenu.tsx

@@ -3,8 +3,6 @@ import { Menu, MenuButton, MenuList } from '@reach/menu-button';
 import { PropsWithChildren, ReactNode } from 'react';
 import { MoreVertical } from 'react-feather';
 
-import { useTableContext } from './TableContainer';
-
 interface Props {
   quickActions?: ReactNode;
 }
@@ -13,8 +11,6 @@ export function TableSettingsMenu({
   quickActions,
   children,
 }: PropsWithChildren<Props>) {
-  useTableContext();
-
   return (
     <Menu className="setting">
       {({ isExpanded }) => (

app/react/components/datatables/TableTitle.tsx

@@ -2,8 +2,6 @@ import { ComponentType, PropsWithChildren, ReactNode } from 'react';
 
 import { Icon } from '@@/Icon';
 
-import { useTableContext } from './TableContainer';
-
 interface Props {
   icon?: ReactNode | ComponentType<unknown>;
   featherIcon?: boolean;
@@ -16,8 +14,6 @@ export function TableTitle({
   label,
   children,
 }: PropsWithChildren<Props>) {
-  useTableContext();
-
   return (
     <div className="toolBar">
       <div className="toolBarTitle">

app/react/components/datatables/TableTitleActions.tsx

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
-
-import { useTableContext } from './TableContainer';
+import { Children, PropsWithChildren } from 'react';
 
 export function TableTitleActions({ children }: PropsWithChildren<unknown>) {
-  useTableContext();
+  if (Children.count(children) === 0) {
+    return null;
+  }
 
   return <div className="settings">{children}</div>;
 }