move projectScope & perms out of Table and into TablePage

src/components/Table/Table.tsx

@@ -26,17 +26,9 @@ import ContextMenu from "./ContextMenu";
 
 import EmptyState from "@src/components/EmptyState";
 // import BulkActions from "./BulkActions";
-import AddRow from "@src/components/TableToolbar/AddRow";
-import { AddRow as AddRowIcon } from "@src/assets/icons";
 
-import {
-  projectScope,
-  userRolesAtom,
-  userSettingsAtom,
-} from "@src/atoms/projectScope";
 import {
   tableScope,
-  tableIdAtom,
   tableSettingsAtom,
   tableSchemaAtom,
   tableColumnsOrderedAtom,
@@ -52,7 +44,6 @@ import { COLLECTION_PAGE_SIZE } from "@src/config/db";
 
 import { getFieldType, getFieldProp } from "@src/components/fields";
 import { FieldType } from "@src/constants/fields";
-import { formatSubTableName } from "@src/utils/table";
 import { TableRow, ColumnConfig } from "@src/types/table";
 import { StyledCell } from "./Styled/StyledCell";
 import { useKeyboardNavigation } from "./useKeyboardNavigation";
@@ -73,11 +64,21 @@ declare module "@tanstack/table-core" {
 const columnHelper = createColumnHelper<TableRow>();
 const getRowId = (row: TableRow) => row._rowy_ref.path || row._rowy_ref.id;
 
-export default function TableComponent() {
-  const [userRoles] = useAtom(userRolesAtom, projectScope);
-  const [userSettings] = useAtom(userSettingsAtom, projectScope);
+export interface ITableProps {
+  canAddColumn: boolean;
+  canEditColumn: boolean;
+  canEditCell: boolean;
+  hiddenColumns?: string[];
+  emptyState?: React.ReactNode;
+}
 
-  const [tableId] = useAtom(tableIdAtom, tableScope);
+export default function Table({
+  canAddColumn,
+  canEditColumn,
+  canEditCell,
+  hiddenColumns,
+  emptyState,
+}: ITableProps) {
   const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
@@ -93,9 +94,6 @@ export default function TableComponent() {
   const containerRef = useRef<HTMLDivElement>(null);
   const gridRef = useRef<HTMLDivElement>(null);
 
-  const canAddColumn = userRoles.includes("ADMIN");
-  const canEditColumn = userRoles.includes("ADMIN");
-
   // Get column defs from table schema
   // Also add end column for admins
   const columns = useMemo(() => {
@@ -124,7 +122,6 @@ export default function TableComponent() {
           //   tableSettings.readOnly && !userRoles.includes("ADMIN")
           //     ? false
           //     : columnConfig.editable ?? true,
-          // width: columnConfig.width ?? DEFAULT_COL_WIDTH,
         })
       );
 
@@ -133,13 +130,6 @@ export default function TableComponent() {
         columnHelper.display({
           id: "_rowy_column_actions",
           cell: FinalColumn as any,
-          // cell: () => (
-          //   <>
-          //     <IconButton>M</IconButton>
-          //     <IconButton>D</IconButton>
-          //     <IconButton>X</IconButton>
-          //   </>
-          // ),
         })
       );
     }
@@ -147,14 +137,11 @@ export default function TableComponent() {
     return _columns;
   }, [tableColumnsOrdered, canAddColumn, tableSettings.readOnly]);
 
-  // Get user’s hidden columns from user document
-  const userDocHiddenFields =
-    userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields;
-  // Memoize into a VisibilityState
+  // Get user’s hidden columns from props and memoize into a VisibilityState
   const columnVisibility = useMemo(() => {
-    if (!Array.isArray(userDocHiddenFields)) return {};
-    return userDocHiddenFields.reduce((a, c) => ({ ...a, [c]: false }), {});
-  }, [userDocHiddenFields]);
+    if (!Array.isArray(hiddenColumns)) return {};
+    return hiddenColumns.reduce((a, c) => ({ ...a, [c]: false }), {});
+  }, [hiddenColumns]);
 
   // Get frozen columns
   const columnPinning = useMemo(
@@ -197,11 +184,7 @@ export default function TableComponent() {
   });
   const {
     virtualRows,
-    // totalHeight,
-    // scrollToRowIndex,
     virtualCols,
-    // totalWidth,
-    // scrollToColIndex,
     paddingTop,
     paddingBottom,
     paddingLeft,
@@ -518,6 +501,9 @@ export default function TableComponent() {
           {paddingBottom > 0 && (
             <div role="presentation" style={{ height: `${paddingBottom}px` }} />
           )}
+
+          {tableRows.length === 0 &&
+            (emptyState ?? <EmptyState sx={{ py: 8 }} />)}
         </div>
       </StyledTable>
 

src/pages/Table/TablePage.tsx

@@ -18,9 +18,19 @@ import SideDrawer from "@src/components/SideDrawer";
 import ColumnMenu from "@src/components/ColumnMenu";
 import ColumnModals from "@src/components/ColumnModals";
 import TableModals from "@src/components/TableModals";
+import EmptyState from "@src/components/EmptyState";
+import AddRow from "@src/components/TableToolbar/AddRow";
+import { AddRow as AddRowIcon } from "@src/assets/icons";
 
+import {
+  projectScope,
+  userRolesAtom,
+  userSettingsAtom,
+} from "@src/atoms/projectScope";
 import {
   tableScope,
+  tableIdAtom,
+  tableSettingsAtom,
   tableSchemaAtom,
   columnModalAtom,
   tableModalAtom,
@@ -30,10 +40,8 @@ import ActionParamsProvider from "@src/components/fields/Action/FormDialog/Provi
 import { useSnackLogContext } from "@src/contexts/SnackLogContext";
 import { TOP_BAR_HEIGHT } from "@src/layouts/Navigation/TopBar";
 import { TABLE_TOOLBAR_HEIGHT } from "@src/components/TableToolbar";
-import {
-  DRAWER_COLLAPSED_WIDTH,
-  DRAWER_WIDTH,
-} from "@src/components/SideDrawer";
+import { DRAWER_COLLAPSED_WIDTH } from "@src/components/SideDrawer";
+import { formatSubTableName } from "@src/utils/table";
 
 // prettier-ignore
 const BuildLogsSnack = lazy(() => import("@src/components/TableModals/CloudLogsModal/BuildLogs/BuildLogsSnack" /* webpackChunkName: "TableModals-BuildLogsSnack" */));
@@ -53,9 +61,19 @@ export default function TablePage({
   disableModals,
   disableSideDrawer,
 }: ITablePageProps) {
+  const [userRoles] = useAtom(userRolesAtom, projectScope);
+  const [userSettings] = useAtom(userSettingsAtom, projectScope);
+  const [tableId] = useAtom(tableIdAtom, tableScope);
+  const [tableSettings] = useAtom(tableSettingsAtom, tableScope);
   const [tableSchema] = useAtom(tableSchemaAtom, tableScope);
   const snackLogContext = useSnackLogContext();
 
+  // Set permissions here so we can pass them to the Table component, which
+  // shouldn’t access projectScope at all, to separate concerns.
+  const canAddColumn = userRoles.includes("ADMIN");
+  const canEditColumn = userRoles.includes("ADMIN");
+  const canEditCell = userRoles.includes("ADMIN") || !tableSettings.readOnly;
+
   // Warn user about leaving when they have a table modal open
   useBeforeUnload(columnModalAtom, tableScope);
   useBeforeUnload(tableModalAtom, tableScope);
@@ -104,6 +122,7 @@ export default function TablePage({
             sx={{
               height: `calc(100vh - ${TOP_BAR_HEIGHT}px - ${TABLE_TOOLBAR_HEIGHT}px)`,
               width: `calc(100% - ${DRAWER_COLLAPSED_WIDTH}px)`,
+              position: "relative",
 
               '& [role="grid"]': {
                 marginBottom: `env(safe-area-inset-bottom)`,
@@ -112,7 +131,27 @@ export default function TablePage({
               },
             }}
           >
-            <Table />
+            <Table
+              canAddColumn={canAddColumn}
+              canEditColumn={canEditColumn}
+              canEditCell={canEditCell}
+              hiddenColumns={
+                userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields
+              }
+              emptyState={
+                <EmptyState
+                  Icon={AddRowIcon}
+                  message="Add a row to get started"
+                  description={
+                    <div>
+                      <br />
+                      <AddRow />
+                    </div>
+                  }
+                  style={{ position: "absolute", inset: 0 }}
+                />
+              }
+            />
           </Box>
         </Suspense>
       </ErrorBoundary>