web: hide ApiButtons on Table View when a resource is disabled (#5229)

web/src/OverviewTable.test.tsx

@@ -32,6 +32,7 @@ import OverviewTable, {
   TableResourceResultCount,
   TableTriggerColumn,
   TableTriggerModeColumn,
+  TableWidgetsColumn,
   TableWithoutGroups,
 } from "./OverviewTable"
 import { ResourceGroupsInfoTip } from "./ResourceGroups"
@@ -627,7 +628,10 @@ describe("when disable resources feature is enabled", () => {
     })
     view.uiResources.unshift(firstDisabledResource)
     view.uiResources.push(secondDisabledResource)
-
+    // Add a button to the first disabled resource
+    view.uiButtons = [
+      oneButton(0, firstDisabledResource.metadata?.name as string),
+    ]
     wrapper = mount(
       tableViewWithSettings({ view, disableResourcesEnabled: true })
     )
@@ -672,20 +676,22 @@ describe("when disable resources feature is enabled", () => {
     expect(resourceNamesInOrder).toStrictEqual(expectedNameOrder)
   })
 
-  it("does NOT display trigger button, pod ID, endpoints, and trigger mode toggle for a disabled resource", () => {
+  it("does NOT display trigger button, pod ID, endpoints, widgets, and trigger mode toggle for a disabled resource", () => {
     // Get the last resource table row, which should be a disabled resource
     const disabledResource = wrapper.find(ResourceTableRow).at(5)
     const resourceName = disabledResource.find(TableNameColumn)
     const triggerButton = disabledResource.find(TableTriggerColumn)
     const podId = disabledResource.find(TablePodIDColumn)
     const endpointList = disabledResource.find(TableEndpointColumn)
     const triggerModeToggle = disabledResource.find(TableTriggerModeColumn)
+    const widgets = disabledResource.find(TableWidgetsColumn)
 
     expect(resourceName.text()).toBe("zee_disabled_resource")
     expect(triggerButton.html()).toBe(null)
     expect(podId.html()).toBe(null)
     expect(endpointList.html()).toBe(null)
     expect(triggerModeToggle.html()).toBe(null)
+    expect(widgets.html()).toBe(null)
   })
 
   it("adds `isDisabled` class to table rows for disabled resources", () => {

web/src/OverviewTable.tsx

@@ -336,6 +336,7 @@ const WidgetCell = styled.span`
   .MuiButtonGroup-root {
     margin-bottom: ${SizeUnit(0.125)};
     margin-right: ${SizeUnit(0.125)};
+    margin-top: ${SizeUnit(0.125)};
   }
 `
 
@@ -578,7 +579,12 @@ export function TableTriggerModeColumn({ row }: CellProps<RowValues>) {
   )
 }
 
-function TableWidgetsColumn({ row }: CellProps<RowValues>) {
+export function TableWidgetsColumn({ row }: CellProps<RowValues>) {
+  // If a resource is disabled, don't display any buttons
+  if (rowIsDisabled(row)) {
+    return null
+  }
+
   const buttons = row.original.buttons.map((b: UIButton) => {
     let content = (
       <CustomActionButton key={b.metadata?.name} uiButton={b}>