feat: update help section of tarp (#10708)

* feat: update help section of tarp Signed-off-by: Arnab Dutta <[email protected]> * fix: adjust help drawer to various screen sizes Signed-off-by: Arnab Dutta <[email protected]> --------- Signed-off-by: Arnab Dutta <[email protected]>
JanssenProject · Jan 23, 2025 · bee683b · bee683b
1 parent d7200cb
commit bee683b
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 86 deletions.
diff --git a/demos/jans-tarp/src/options/helpDrawer.tsx b/demos/jans-tarp/src/options/helpDrawer.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 
 export default function HelpDrawer({ isOpen, handleDrawer }) {
   const [open, setOpen] = React.useState(isOpen);
-
+  const [width, setWidth] = React.useState((window.innerWidth * 2)/3 )
   React.useEffect(() => {
     handleDrawer(isOpen)
     setOpen(isOpen);
@@ -20,88 +17,81 @@ export default function HelpDrawer({ isOpen, handleDrawer }) {
   };
 
   const DrawerList = (
-    <>
-      <Box sx={{ width: 1184 }} role="presentation">
-        <Card sx={{ maxWidth: 1184 }}>
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              Step 1
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              Click on 'Add Client' button for Dynamic Client Registration on authentication server.
-            </Typography>
-          </CardContent>
-          <CardMedia
-            sx={{ height: 266 }}
-            image={'tarpDocs1.png'}
-          />
-        </Card>
-      </Box>
-      <Box sx={{ width: 586 }} role="presentation">
-        <Card sx={{ maxWidth: 586 }}>
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              Step 2
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              On registration form enter details and register.
-            </Typography>
-          </CardContent>
-          <CardMedia
-            sx={{ height: 445 }}
-            image={'tarpDocs2.png'}
-          />
-        </Card>
-      </Box>
-      <Box sx={{ width: 1184 }} role="presentation">
-        <Card sx={{ maxWidth: 1184 }}>
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              Step 3
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              Trigger authentication flow.
-            </Typography>
-          </CardContent>
-          <CardMedia
-            sx={{ height: 266 }}
-            image={'tarpDocs3.png'}
-          />
-        </Card>
-      </Box>
-      <Box sx={{ width: 575 }} role="presentation">
-        <Card sx={{ maxWidth: 575 }}>
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              Step 4
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              The Registered client can be used to trigger authentication flow until it is expired.
-            </Typography>
-          </CardContent>
-          <CardMedia
-            sx={{ height: 459 }}
-            image={'tarpDocs4.png'}
-          />
-        </Card>
-      </Box>
-      <Box sx={{ width: 575 }} role="presentation">
-        <Card sx={{ maxWidth: 575 }}>
-          <CardContent>
-            <Typography gutterBottom variant="h5" component="div">
-              Optional
-            </Typography>
-            <Typography variant="body2" color="text.secondary">
-              For <b>'Acr Values'</b> input, you can also add a new ACR option.
-            </Typography>
-          </CardContent>
-          <CardMedia
-            sx={{ height: 459 }}
-            image={'tarpDocs5.png'}
-          />
-        </Card>
-      </Box>
-    </>
+
+    <Box sx={{ width: width }} role="presentation">
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 1
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Click on 'Add Client' button for Dynamic Client Registration on authentication server.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs1.png'} />
+      </div>
+
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 2
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          On registration form enter details and register.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs2.png'} />
+      </div>
+
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 3 (Optional: For Cedarlig authorization testing)
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Add Cedarling bootstrap configuration on <b>Cedarling</b> tab.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs3.png'} />
+      </div>
+
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 4
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Start Authentication code flow.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs4.png'} />
+      </div>
+
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 5
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Enter required details before starting Authentication Code flow.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs5.png'} />
+      </div>
+
+      <div style={{ padding: "20px" }}>
+        <Typography gutterBottom variant="h5" component="div">
+          Step 6 (Optional: For Cedarlig authorization testing)
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          After authentication, test Cedarling Authorization decision using following request form.
+        </Typography>
+      </div>
+      <div className="image-container">
+        <img id="dynamic-image" src={'tarpDocs6.png'} />
+      </div>
+    </Box>
+
   );
 
   return (

diff --git a/demos/jans-tarp/src/options/options.css b/demos/jans-tarp/src/options/options.css
@@ -195,6 +195,17 @@ label.light {
   z-index: 1; /* Ensure loader stays above the form */
 }
 
+.image-container {
+  display: flex;
+  flex-direction: column; /* Stack content vertically */
+  align-items: center; /* Optional: Center align other content */
+}
+
+.image-container img {
+  max-width: 100%; /* Ensure responsiveness */
+  height: auto;
+}
+
 @media screen and (min-width: 480px) {
 
   form {

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/tarpDocs2.png b/demos/jans-tarp/src/static/tarpDocs2.png
diff --git a/demos/jans-tarp/src/static/tarpDocs3.png b/demos/jans-tarp/src/static/tarpDocs3.png
diff --git a/demos/jans-tarp/src/static/tarpDocs4.png b/demos/jans-tarp/src/static/tarpDocs4.png
diff --git a/demos/jans-tarp/src/static/tarpDocs5.png b/demos/jans-tarp/src/static/tarpDocs5.png
diff --git a/demos/jans-tarp/src/static/tarpDocs6.png b/demos/jans-tarp/src/static/tarpDocs6.png
diff --git a/demos/jans-tarp/webpack.common.js b/demos/jans-tarp/webpack.common.js
@@ -71,6 +71,9 @@ const assetArr = [{
 },
 {
     from: path.resolve('src/static/tarpDocs5.png')
+},
+{
+    from: path.resolve('src/static/tarpDocs6.png')
 }];
 
 const chromeConfig = merge(commonConfig, {
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,9 @@ const assetArr = [{ @@
     },
     {
         from: path.resolve('src/static/tarpDocs5.png')
+    },
+    {
+        from: path.resolve('src/static/tarpDocs6.png')
     }];
     const chromeConfig = merge(commonConfig, {
@@ Expand Down @@