Add tooltip when not authorized

janus-idp · Jun 19, 2024 · e3066d7 · e3066d7
1 parent a1731ea
commit e3066d7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 30 deletions.
diff --git a/...orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx b/...orchestrator/src/components/WorkflowDefinitionViewerPage/WorkflowDefinitionViewerPage.tsx
@@ -10,6 +10,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
+import { Tooltip } from '@mui/material';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 import Skeleton from '@mui/material/Skeleton';
@@ -68,14 +69,19 @@ export const WorkflowDefinitionViewerPage = () => {
               <Skeleton variant="text" width="5rem" />
             ) : (
               !loadingPermission && (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={handleExecute}
-                  disabled={!canRun}
+                <Tooltip
+                  title="user not authorized to execute workflow"
+                  disableHoverListener={canRun}
                 >
-                  Run
-                </Button>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleExecute}
+                    disabled={!canRun}
+                  >
+                    Run
+                  </Button>
+                </Tooltip>
               )
             )}
           </Grid>

diff --git a/plugins/orchestrator/src/components/WorkflowInstancePage.tsx b/plugins/orchestrator/src/components/WorkflowInstancePage.tsx
@@ -13,6 +13,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { usePermission } from '@backstage/plugin-permission-react';
 
+import { Tooltip } from '@mui/material';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
 
@@ -211,39 +212,54 @@ export const WorkflowInstancePage = ({
               {!canRerun && (
                 <>
                   <Grid item>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      disabled={!permittedToAbort.allowed || !canAbort}
-                      onClick={canAbort ? handleRerun : undefined}
+                    <Tooltip
+                      title="user not authorized to execute workflow"
+                      disableHoverListener={permittedToExecute.allowed}
                     >
-                      Retrigger
-                    </Button>
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        disabled={!permittedToExecute.allowed || !canRerun}
+                        onClick={canRerun ? handleRerun : undefined}
+                      >
+                        Retrigger
+                      </Button>
+                    </Tooltip>
                   </Grid>
                   <Grid item>
-                    <Button
-                      variant="contained"
-                      color="secondary"
-                      disabled={!permittedToAbort.allowed || !canAbort}
-                      onClick={
-                        canAbort ? toggleAbortConfirmationDialog : undefined
-                      }
+                    <Tooltip
+                      title="user not authorized to abort workflow"
+                      disableHoverListener={permittedToAbort.allowed}
                     >
-                      Abort
-                    </Button>
+                      <Button
+                        variant="contained"
+                        color="secondary"
+                        disabled={!permittedToAbort.allowed || !canAbort}
+                        onClick={
+                          canAbort ? toggleAbortConfirmationDialog : undefined
+                        }
+                      >
+                        Abort
+                      </Button>
+                    </Tooltip>
                   </Grid>
                 </>
               )}
               {!canAbort && (
                 <Grid item>
-                  <Button
-                    variant="contained"
-                    color="primary"
-                    disabled={!permittedToExecute.allowed || !canRerun}
-                    onClick={canRerun ? handleRerun : undefined}
+                  <Tooltip
+                    title="user not authorized to execute workflow"
+                    disableHoverListener={permittedToExecute.allowed}
                   >
-                    Rerun
-                  </Button>
+                    <Button
+                      variant="contained"
+                      color="primary"
+                      disabled={!permittedToExecute.allowed || !canRerun}
+                      onClick={canRerun ? handleRerun : undefined}
+                    >
+                      Rerun
+                    </Button>
+                  </Tooltip>
                 </Grid>
               )}
             </Grid>