Add tooltip when not authorized

janus-idp · Jun 20, 2024 · c9ae279 · c9ae279
1 parent a1731ea
commit c9ae279
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 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';
@@ -64,10 +65,13 @@ export const WorkflowDefinitionViewerPage = () => {
         )}
         <Grid container item justifyContent="flex-end" spacing={1}>
           <Grid item>
-            {loading ? (
+            {loading || loadingPermission ? (
               <Skeleton variant="text" width="5rem" />
             ) : (
-              !loadingPermission && (
+              <Tooltip
+                title="user not authorized to execute workflow"
+                disableHoverListener={canRun}
+              >
                 <Button
                   variant="contained"
                   color="primary"
@@ -76,7 +80,7 @@ export const WorkflowDefinitionViewerPage = () => {
                 >
                   Run
                 </Button>
-              )
+              </Tooltip>
             )}
           </Grid>
         </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>