fix: undefined error in permissions table

flanksource · Oct 31, 2024 · 22c6291 · 22c6291
1 parent 4e131ea
commit 22c6291
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 19 deletions.
diff --git a/src/components/Permissions/PermissionsTable.tsx b/src/components/Permissions/PermissionsTable.tsx
@@ -11,6 +11,7 @@ import PlaybookSpecIcon from "../Playbooks/Settings/PlaybookSpecIcon";
 import { TopologyLink } from "../Topology/TopologyLink";
 import { permissionObjectList } from "./ManagePermissions/Forms/FormikPermissionSelectResourceFields";
 import { permissionsActionsList } from "./PermissionsView";
+import { BsBan } from "react-icons/bs";
 
 const permissionsTableColumns: MRT_ColumnDef<PermissionAPIResponse>[] = [
   {
@@ -90,8 +91,15 @@ const permissionsTableColumns: MRT_ColumnDef<PermissionAPIResponse>[] = [
 
       return (
         <div>
-          <span className="px-2">{actionLabel ?? action}</span>
-          {deny && <Badge text="deny" />}
+          <span>
+            {actionLabel ?? action}
+            {deny && (
+              <BsBan
+                color="red"
+                className="inline-block h-4 w-auto fill-current object-center pl-1"
+              />
+            )}
+          </span>
         </div>
       );
     }

diff --git a/src/components/Permissions/PermissionsView.tsx b/src/components/Permissions/PermissionsView.tsx
@@ -21,8 +21,8 @@ export const permissionsActionsList: FormikSelectDropdownOption[] = [
   { value: "ActionDelete", label: "delete" },
   { value: "ActionAll", label: "*" },
   { value: "ActionCRUD", label: "create,read,update,delete" },
-  { value: "ActionRun", label: "run" },
-  { value: "ActionApprove", label: "approve" }
+  { value: "ActionRun", label: "playbook:run" },
+  { value: "ActionApprove", label: "playbook:approve" }
 ];
 
 type PermissionsViewProps = {

diff --git a/src/pages/incident/IncidentListPage.tsx b/src/pages/incident/IncidentListPage.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
-import { AiFillPlusCircle } from "react-icons/ai/";
+import { AiFillPlusCircle } from "react-icons/ai";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { getIncidentsSummary } from "../../api/services/incident";
 import FilterIncidents from "../../components/Incidents/FilterIncidents/FilterIncidents";

diff --git a/src/ui/MRTDataTable/MRTDataTable.tsx b/src/ui/MRTDataTable/MRTDataTable.tsx
@@ -7,17 +7,13 @@ import {
   MRT_ColumnDef,
   MRT_Row,
   MRT_TableInstance,
-  useMantineReactTable
+  useMantineReactTable,
+  MantineReactTable,
+  MRT_TableOptions
 } from "mantine-react-table";
-import dynamic from "next/dynamic";
 import useReactTablePaginationState from "../DataTable/Hooks/useReactTablePaginationState";
 import useReactTableSortState from "../DataTable/Hooks/useReactTableSortState";
 
-const MantineReactTable = dynamic(
-  () => import("mantine-react-table").then((mod) => mod.MantineReactTable),
-  { ssr: false }
-);
-
 type MRTDataTableProps<T extends Record<string, any> = {}> = {
   data: T[];
   columns: MRT_ColumnDef<T>[];
@@ -50,7 +46,7 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
   onRowClick = () => {},
   isLoading = false,
   disablePagination = false,
-  enableServerSideSorting = undefined,
+  enableServerSideSorting = false,
   enableServerSidePagination = false,
   enableGrouping = false,
   manualPageCount,
@@ -65,7 +61,7 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
   const { pageIndex, pageSize, setPageIndex } = useReactTablePaginationState();
   const [sortState, setSortState] = useReactTableSortState();
 
-  const table = useMantineReactTable({
+  const options = {
     data: data,
     columns: columns,
     enableGlobalFilter: false,
@@ -74,6 +70,7 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
     enableSelectAll: false,
     enableFullScreenToggle: false,
     layoutMode: "grid",
+    enableTopToolbar: false,
     enableColumnResizing: true,
     enableStickyHeader: true,
     enableTableFooter: true,
@@ -108,7 +105,7 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
       }
     }),
     enablePagination: !disablePagination,
-    enableExpandAll: true,
+    enableExpandAll: enableGrouping,
     mantineTableContainerProps: {
       sx: {
         flex: "1 1 0"
@@ -133,9 +130,11 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
         return acc;
       }, {})
     },
-    initialState: {
-      expanded: expandAllRows ? true : undefined
-    },
+    initialState: expandAllRows
+      ? {
+          expanded: true
+        }
+      : undefined,
     mantinePaginationProps: {
       rowsPerPageOptions: ["50", "100", "200"]
     },
@@ -145,8 +144,11 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
     mantineExpandAllButtonProps: {
       size: "xs"
     },
+
     renderDetailPanel
-  });
+  } as MRT_TableOptions;
+
+  const table = useMantineReactTable(options);
 
   // @ts-expect-error
   return <MantineReactTable table={table} />;