fix(devtools): improve permission feedback in ScheduledTasksContent

Updated the `ScheduledTasksContent`  component to provide better visual
feedback when a user lacks permission to run a task. A new
`CreateNotAllowed` component displays a disabled block icon with a
tooltip instead of the default error behavior.

Signed-off-by: Yash Oswal <yoswal@redhat.com>

.changeset/small-jars-lick.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-devtools': patch
+---
+
+Fixes an issue where a user lacking permission to schedule tasks can now easily see the issue through a custom icon + tooltip.

plugins/devtools/src/components/Content/ScheduledTasksContent/ScheduledTasksContent.tsx

@@ -35,6 +35,7 @@ import { alertApiRef, configApiRef, useApi } from '@backstage/core-plugin-api';
 import RefreshIcon from '@material-ui/icons/Refresh';
 import NightsStay from '@material-ui/icons/NightsStay';
 import ErrorIcon from '@material-ui/icons/Error';
+import BlockIcon from '@material-ui/icons/Block';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { ScheduledTaskDetailPanel } from './ScheduledTaskDetailedPanel';
 import { RequirePermission } from '@backstage/plugin-permission-react';
@@ -89,6 +90,12 @@ const StatusDisplay = ({
   </Box>
 );
 
+const CreateNotAllowed = () => (
+  <Tooltip title="You are not allowed to perform this action">
+    <BlockIcon color="disabled" />
+  </Tooltip>
+);
+
 /** @public */
 export const ScheduledTasksContent = () => {
   const classes = useStyles();
@@ -198,7 +205,10 @@ export const ScheduledTasksContent = () => {
     {
       title: 'Actions',
       render: (rowData: TaskApiTasksResponse) => (
-        <RequirePermission permission={devToolsTaskSchedulerCreatePermission}>
+        <RequirePermission
+          permission={devToolsTaskSchedulerCreatePermission}
+          errorPage={<CreateNotAllowed />}
+        >
           <Tooltip title="Run Task">
             <IconButton
               aria-label="Trigger"
@@ -225,6 +235,7 @@ export const ScheduledTasksContent = () => {
       ),
       sorting: false,
       width: '10%',
+      align: 'center',
     },
   ];