fix(orchestraotr): resolved grey background appears in actions column in workflows table (janus-idp#1317)

FLPATH-1016: resolved grey background appears in actions column in workflows table

Author: batzionb

plugins/orchestrator/src/components/WorkflowsTable.tsx

@@ -1,12 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import {
-  Link,
-  Table,
-  TableColumn,
-  TableProps,
-} from '@backstage/core-components';
+import { Link, TableColumn, TableProps } from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 
 import Pageview from '@material-ui/icons/Pageview';
@@ -26,6 +21,7 @@ import {
   workflowDefinitionsRouteRef,
 } from '../routes';
 import { capitalize } from '../utils/StringUtils';
+import OverrideBackstageTable from './ui/OverrideBackstageTable';
 import { WorkflowInstanceStatusIndicator } from './WorkflowInstanceStatusIndicator';
 
 export interface WorkflowsTableProps {
@@ -132,7 +128,7 @@ export const WorkflowsTable = ({ items }: WorkflowsTableProps) => {
   );
 
   return (
-    <Table<FormattedWorkflowOverview>
+    <OverrideBackstageTable<FormattedWorkflowOverview>
       title="Workflows"
       options={options}
       columns={columns}

plugins/orchestrator/src/components/ui/OverrideBackstageTable.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  Table as BackstageTable,
+  TableProps,
+} from '@backstage/core-components';
+
+import { makeStyles } from '@material-ui/core';
+
+// Workaround by issue created from overriding the tab theme in the backstage-showcase to add a gray background to disabled tabs.
+// This is achieved by overriding the global Mui-disabled class, which results in the actions column header background turning gray.
+// See https://github.com/janus-idp/backstage-showcase/blob/main/packages/app/src/themes/componentOverrides.ts#L59
+
+const useStyles = makeStyles({
+  orchestratorTable: {
+    '& .Mui-disabled': {
+      backgroundColor: 'transparent',
+    },
+  },
+});
+
+const OverrideBackstageTable = <T extends object>(props: TableProps<T>) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.orchestratorTable}>
+      <BackstageTable {...props} />
+    </div>
+  );
+};
+
+export default OverrideBackstageTable;