From d673bd427aa59a869e139a02d7fddc9932a36e9c Mon Sep 17 00:00:00 2001
From: dlpzx <71252798+dlpzx@users.noreply.github.com>
Date: Fri, 12 Jan 2024 16:20:10 +0100
Subject: [PATCH] Add word-wrap in strings in share lists (#972)

### Feature or Bugfix
- Bugfix

### Detail
- Add word wrap around strings to force wrapping with no break chars in
Share list. The issue and alternatives are better explained in #971
After this PR, the UI in Share list looks like this for very long
strings:

![image](https://github.com/data-dot-all/dataall/assets/71252798/7329855b-b3c6-49ed-afbc-8a2dd9b02126)


### Relates
- #971

### Security
Please answer the questions below briefly where applicable, or write
`N/A`. Based on
[OWASP 10](https://owasp.org/Top10/en/).

- Does this PR introduce or modify any input fields or queries - this
includes
fetching data from storage outside the application (e.g. a database, an
S3 bucket)?
  - Is the input sanitized?
- What precautions are you taking before deserializing the data you
consume?
  - Is injection prevented by parametrizing queries?
  - Have you ensured no `eval` or similar functions are used?
- Does this PR introduce any functionality or component that requires
authorization?
- How have you ensured it respects the existing AuthN/AuthZ mechanisms?
  - Are you logging failed auth attempts?
- Are you using or adding any cryptographic features?
  - Do you use a standard proven implementations?
  - Are the used keys controlled by the customer? Where are they stored?
- Are you introducing any new policies/roles/users?
  - Have you used the least-privilege principle? How?


By submitting this pull request, I confirm that my contribution is made
under the terms of the Apache 2.0 license.
---
 .../Shares/components/ShareBoxListItem.js     | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/frontend/src/modules/Shares/components/ShareBoxListItem.js b/frontend/src/modules/Shares/components/ShareBoxListItem.js
index 96dc241e3..2788c34b7 100644
--- a/frontend/src/modules/Shares/components/ShareBoxListItem.js
+++ b/frontend/src/modules/Shares/components/ShareBoxListItem.js
@@ -17,7 +17,7 @@ export const ShareBoxListItem = ({ share }) => {
       }}
     >
       <Grid container spacing={0.5} alignItems="center">
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2.2} lg={1.5} xl={1.2}>
           <Box
             sx={{
               pt: 2,
@@ -28,7 +28,7 @@ export const ShareBoxListItem = ({ share }) => {
             <ShareStatus status={share.status} />
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={2} xs={2}>
+        <Grid item justifyContent="flex-end" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -39,12 +39,16 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               Request owner
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.principal.SamlGroupName}`}
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={2} xs={2}>
+        <Grid item justifyContent="flex-end" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -55,12 +59,16 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               IAM role name
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.principal.principalIAMRoleName}`}
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -71,12 +79,16 @@ export const ShareBoxListItem = ({ share }) => {
             <Typography color="textPrimary" variant="body1">
               Dataset
             </Typography>
-            <Typography color="textSecondary" variant="body1">
+            <Typography
+              color="textSecondary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               {`${share.dataset.datasetName}`}
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="center" md={2} xs={2}>
+        <Grid item justifyContent="center" md={2} lg={2.25} xl={2.25}>
           <Box
             sx={{
               pt: 2,
@@ -84,7 +96,11 @@ export const ShareBoxListItem = ({ share }) => {
               px: 3
             }}
           >
-            <Typography color="textPrimary" variant="body1">
+            <Typography
+              color="textPrimary"
+              variant="body1"
+              style={{ wordWrap: 'break-word' }}
+            >
               Dataset Owner
             </Typography>
             <Typography color="textSecondary" variant="body1">
@@ -92,7 +108,7 @@ export const ShareBoxListItem = ({ share }) => {
             </Typography>
           </Box>
         </Grid>
-        <Grid item justifyContent="flex-end" md={1.3} xs={1.3}>
+        <Grid item justifyContent="flex-end" md={1.3} lg={1.2} xl={1.4}>
           <Button
             color="primary"
             type="button"
@@ -103,7 +119,7 @@ export const ShareBoxListItem = ({ share }) => {
             Open Share Request
           </Button>
         </Grid>
-        <Grid item justifyContent="flex-end" md={0.2} xs={0.2}>
+        <Grid item justifyContent="flex-end" md={0.2} lg={0.2} xl={0.4}>
           {share.statistics.sharedItems > 0 && (
             <Tooltip
               title={share.statistics.sharedItems + ' shared items'}