feat: create help button for tarp #8132 (#8133)

Signed-off-by: Arnab Dutta <arnab.bdutta@gmail.com> Co-authored-by: Mohammad Abudayyeh <47318409+moabu@users.noreply.github.com>
JanssenProject · Mar 25, 2024 · 1340e26 · 1340e26
1 parent 8ce1051
commit 1340e26
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/demos/jans-tarp/src/options/oidcClients.tsx b/demos/jans-tarp/src/options/oidcClients.tsx
@@ -138,34 +138,36 @@ export default function OIDCClients(data) {
         <Container maxWidth="lg">
             <RegisterClient isOpen={modelOpen} handleDialog={handleDialog} />
             <HelpDrawer isOpen={drawerOpen} handleDrawer={handleDrawer} />
-            <Stack direction="row" spacing={2} sx={{ mb: 1 }}>
-                <Button color="success" variant="outlined" startIcon={<LiveHelpIcon />} onClick={() => handleDrawer(true)} >
-                    How it works?
-                </Button>
-                <Button color="success" variant="outlined" startIcon={<AddIcon />} onClick={() => setModelOpen(true)} >
-                    Add Client
+            <Stack direction="column" spacing={2} sx={{ mb: 1 }}>
+                <Stack direction="row" spacing={2} sx={{ mb: 1 }} style={{ display: 'flex', justifyContent: 'flex-end' }}>
+                    <Button color="success" variant="outlined" startIcon={<AddIcon />} onClick={() => setModelOpen(true)} style={{ maxWidth: '200px' }}>
+                        Add Client
+                    </Button>
+                </Stack>
+                <TableContainer component={Paper}>
+                    <Table aria-label="collapsible table">
+                        <TableHead>
+                            <TableRow>
+                                <StyledTableCell />
+                                <StyledTableCell>Issuer</StyledTableCell>
+                                <StyledTableCell>Client Id</StyledTableCell>
+                                <StyledTableCell>Client Secret</StyledTableCell>
+                                <StyledTableCell>Is Active</StyledTableCell>
+                                <StyledTableCell align="right">Action</StyledTableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {(data.data === undefined || data.data.length == 0) ?
+                                <TableCell colSpan={6}><Alert severity="warning">No Records to show.</Alert></TableCell> :
+                                data.data.map((row) => (<Row key={row.clientId} row={row} />))
+                            }
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <Button color="success" variant="contained" startIcon={<LiveHelpIcon />} onClick={() => handleDrawer(true)} style={{ maxWidth: '150px', float: 'left' }}>
+                    Help?
                 </Button>
             </Stack>
-            <TableContainer component={Paper}>
-                <Table aria-label="collapsible table">
-                    <TableHead>
-                        <TableRow>
-                            <StyledTableCell />
-                            <StyledTableCell>Issuer</StyledTableCell>
-                            <StyledTableCell>Client Id</StyledTableCell>
-                            <StyledTableCell>Client Secret</StyledTableCell>
-                            <StyledTableCell>Is Active</StyledTableCell>
-                            <StyledTableCell align="right">Action</StyledTableCell>
-                        </TableRow>
-                    </TableHead>
-                    <TableBody>
-                        {(data.data === undefined || data.data.length == 0) ?
-                            <TableCell colSpan={6}><Alert severity="warning">No Records to show.</Alert></TableCell> :
-                            data.data.map((row) => (<Row key={row.clientId} row={row} />))
-                        }
-                    </TableBody>
-                </Table>
-            </TableContainer>
         </Container>
     );
 }
diff --git a/demos/jans-tarp/src/static/tarpDocs1.png b/demos/jans-tarp/src/static/tarpDocs1.png
diff --git a/demos/jans-tarp/src/static/tarpDocs3.png b/demos/jans-tarp/src/static/tarpDocs3.png