Merge pull request #111 from CybercentreCanada/hotfix/ui_fixes

Hotfix/UI fixes (dev)
CybercentreCanada · Aug 24, 2021 · c95f6ea · c95f6ea
2 parents 343558e + 174f21b
commit c95f6ea
Show file tree

Hide file tree

Showing 30 changed files with 124 additions and 88 deletions.
diff --git a/src/commons/addons/elements/search/search-bar.tsx b/src/commons/addons/elements/search/search-bar.tsx
@@ -55,9 +55,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   const element = useRef<HTMLInputElement>();
   const [value, setValue] = useState<string>(initValue);
 
-  const getInputEl = () => {
-    return element.current.querySelector('input');
-  };
+  const getInputEl = () => element.current.querySelector('input');
 
   // handler[onchange]: textfield change handler.
   // track value of filter..

diff --git a/src/commons/components/app/AppContextProvider.tsx b/src/commons/components/app/AppContextProvider.tsx
@@ -53,7 +53,7 @@ const getInitialTheme = (defaultTheme, prefersDarkMode) => {
 
 const useStyles = makeStyles(theme => ({
   snackroot: {
-    [theme.breakpoints.only('xs')]: { wordBreak: 'break-all' }
+    [theme.breakpoints.only('xs')]: { wordBreak: 'break-word' }
   }
 }));
 

diff --git a/src/commons/components/layout/LayoutProvider.tsx b/src/commons/components/layout/LayoutProvider.tsx
@@ -30,7 +30,8 @@ const useNewStyles = makeStyles(theme => ({
     flexDirection: 'column',
     position: 'relative',
     flex: 1,
-    height: '100%'
+    height: '100%',
+    width: '100%'
   },
   appVerticalRightContent: {
     height: 'auto',

diff --git a/src/components/routes/admin/error_viewer.tsx b/src/components/routes/admin/error_viewer.tsx
@@ -29,7 +29,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',
@@ -134,7 +135,7 @@ function ErrorDetail({ error }) {
 
       <div style={{ marginBottom: theme.spacing(1) }}>
         <label>{t('file_info')}</label>
-        <div style={{ wordBreak: 'break-all' }}>
+        <div style={{ wordBreak: 'break-word' }}>
           {error.sha256}
           <BsClipboard className={classes.clipboardIcon} onClick={() => copy(error.sha256, 'drawerTop')} />
         </div>

diff --git a/src/components/routes/admin/service_detail/container_card.tsx b/src/components/routes/admin/service_detail/container_card.tsx
@@ -20,14 +20,13 @@ const useStyles = makeStyles(theme => ({
     }
   },
   card_title: {
-    fontSize: 'large',
+    fontSize: 'larger',
     fontFamily: 'monospace'
   },
   label: {
     fontWeight: 500
   },
   mono: {
-    fontSize: 'larger',
     fontFamily: 'monospace'
   }
 }));

diff --git a/src/components/routes/admin/site_map.tsx b/src/components/routes/admin/site_map.tsx
@@ -29,7 +29,9 @@ const StyledTableCell = withStyles((theme: Theme) =>
     root: {
       paddingRight: theme.spacing(1),
       paddingLeft: theme.spacing(1),
-      wordBreak: 'break-all'
+      [theme.breakpoints.up('md')]: {
+        wordBreak: 'break-word'
+      }
     },
     head: {
       backgroundColor: theme.palette.type === 'dark' ? '#404040' : '#EEE',
@@ -107,32 +109,36 @@ export default function SiteMap() {
                     )}
                   </StyledTableCell>
                   <StyledTableCell>
-                    {path.req_priv &&
-                      path.req_priv.map((priv, pid) => (
-                        <CustomChip
-                          key={pid}
-                          mono
-                          type="rounded"
-                          color={privMap[priv]}
-                          size="tiny"
-                          label={priv}
-                          tooltip={t(`${priv}`)}
-                        />
-                      ))}
+                    <div style={{ display: 'flex' }}>
+                      {path.req_priv &&
+                        path.req_priv.map((priv, pid) => (
+                          <CustomChip
+                            key={pid}
+                            mono
+                            type="rounded"
+                            color={privMap[priv]}
+                            size="tiny"
+                            label={priv}
+                            tooltip={t(`${priv}`)}
+                          />
+                        ))}
+                    </div>
                   </StyledTableCell>
                   <StyledTableCell>
-                    {path.required_type &&
-                      path.required_type.map((req, rid) => (
-                        <CustomChip
-                          key={rid}
-                          mono
-                          type="rounded"
-                          color={reqMapColor[req]}
-                          size="tiny"
-                          label={t(req)}
-                          tooltip={t(`${req}_label`)}
-                        />
-                      ))}
+                    <div style={{ display: 'flex' }}>
+                      {path.required_type &&
+                        path.required_type.map((req, rid) => (
+                          <CustomChip
+                            key={rid}
+                            mono
+                            type="rounded"
+                            color={reqMapColor[req]}
+                            size="tiny"
+                            label={t(req)}
+                            tooltip={t(`${req}_label`)}
+                          />
+                        ))}
+                    </div>
                   </StyledTableCell>
                 </TableRow>
               ))}

diff --git a/src/components/routes/admin/users.tsx b/src/components/routes/admin/users.tsx
@@ -55,7 +55,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',

diff --git a/src/components/routes/alerts/alert-details.tsx b/src/components/routes/alerts/alert-details.tsx
@@ -263,7 +263,7 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ id, alert }) => {
             <Grid container>
               <Grid item xs={12} style={{ marginBottom: theme.spacing(1) }}>
                 <span>{item ? item.file.name : <SkeletonInline />}</span>
-                <span style={{ marginLeft: theme.spacing(1), marginRight: theme.spacing(1), wordBreak: 'break-all' }}>
+                <span style={{ marginLeft: theme.spacing(1), marginRight: theme.spacing(1), wordBreak: 'break-word' }}>
                   {item ? (
                     <CustomChip label={item.file.type} variant="outlined" size="small" />
                   ) : (
@@ -283,7 +283,7 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ id, alert }) => {
                   MD5:
                 </Typography>
               </Grid>
-              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-all' }}>
+              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-word' }}>
                 {item ? item.file.md5 : <SkeletonInline />}
               </Grid>
               <Grid item xs={3} sm={2}>
@@ -295,7 +295,7 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ id, alert }) => {
                   SHA1:
                 </Typography>
               </Grid>
-              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-all' }}>
+              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-word' }}>
                 {item ? item.file.sha1 : <SkeletonInline />}
               </Grid>
               <Grid item xs={3} sm={2}>
@@ -307,7 +307,7 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ id, alert }) => {
                   SHA256:
                 </Typography>
               </Grid>
-              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-all' }}>
+              <Grid item xs={9} sm={10} style={{ wordBreak: 'break-word' }}>
                 {item ? item.file.sha256 : <SkeletonInline />}
               </Grid>
             </Grid>
@@ -320,7 +320,7 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ id, alert }) => {
             <Typography className={classes.sectionTitle}>{t('metadata')}</Typography>
             <Divider />
             <div className={classes.sectionContent}>
-              <pre style={{ margin: 0, fontSize: 'larger', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+              <pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                 {item ? (
                   Object.keys(item.metadata).map(k => (
                     <Grid container spacing={1} key={`alert-metadata-${k}`}>

diff --git a/src/components/routes/alerts/alert-list-item-actions.tsx b/src/components/routes/alerts/alert-list-item-actions.tsx
@@ -254,7 +254,7 @@ const AlertListItemActions: React.FC<AlertListItemActionsProps> = React.memo(
               groupBy ? (
                 <>
                   <span style={{ display: 'inline-block' }}>{t('actions.takeownershipdiag.content.grouped')}</span>
-                  <span style={{ display: 'inline-block', padding: theme.spacing(1), wordBreak: 'break-all' }}>
+                  <span style={{ display: 'inline-block', padding: theme.spacing(1), wordBreak: 'break-word' }}>
                     <Typography variant="caption">{`${groupBy}: ${getValueFromPath(item, groupBy)}`}</Typography>
                   </span>
                 </>

diff --git a/src/components/routes/alerts/alert-list-item.tsx b/src/components/routes/alerts/alert-list-item.tsx
@@ -47,7 +47,7 @@ const AlertListItem: React.FC<AlertListItemProps> = ({ item }) => {
         <Grid item xs={12} md={8}>
           <AlertPriority name={item.priority} />
           {item.group_count && <span style={{ marginLeft: theme.spacing(1) }}>{item.group_count}x</span>}
-          <span style={{ marginLeft: theme.spacing(1), wordBreak: 'break-all' }}>{item.file.name}</span>
+          <span style={{ marginLeft: theme.spacing(1), wordBreak: 'break-word' }}>{item.file.name}</span>
         </Grid>
         <Grid item xs={6} md={2}>
           {item.verdict.malicious.length > item.verdict.non_malicious.length ? (

diff --git a/src/components/routes/alerts/alerts-workflow-actions.tsx b/src/components/routes/alerts/alerts-workflow-actions.tsx
@@ -83,7 +83,7 @@ const AlertsWorkflowActions: React.FC<AlertsWorkflowActionsProps> = ({
       <div style={{ margin: theme.spacing(1) }}>
         <div
           style={{
-            wordBreak: 'break-all',
+            wordBreak: 'break-word',
             marginTop: theme.spacing(1),
             padding: theme.spacing(2),
             color: theme.palette.primary.light,

diff --git a/src/components/routes/manage/heuristics.tsx b/src/components/routes/manage/heuristics.tsx
@@ -24,7 +24,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',

diff --git a/src/components/routes/manage/safelist.tsx b/src/components/routes/manage/safelist.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',

diff --git a/src/components/routes/manage/safelist_detail.tsx b/src/components/routes/manage/safelist_detail.tsx
@@ -194,10 +194,10 @@ const SafelistDetail = ({ safelist_id, close }: SafelistDetailProps) => {
       )}
       <div style={{ textAlign: 'left' }}>
         <div style={{ paddingBottom: theme.spacing(4) }}>
-          <Grid container alignItems="center">
+          <Grid container alignItems="center" spacing={1}>
             <Grid item xs>
               <Typography variant="h4">{safelist ? t(`title.${safelist.type}`) : t('title')}</Typography>
-              <Typography variant="caption">
+              <Typography variant="caption" style={{ wordBreak: 'break-word' }}>
                 {safelist ? safelist_id || id : <Skeleton style={{ width: '10rem' }} />}
               </Typography>
             </Grid>

diff --git a/src/components/routes/manage/signature_sources.tsx b/src/components/routes/manage/signature_sources.tsx
@@ -61,7 +61,7 @@ const useStyles = makeStyles(theme => ({
     }
   },
   card_title: {
-    fontSize: 'large',
+    fontSize: 'larger',
     fontFamily: 'monospace'
   },
   drawerPaper: {
@@ -75,15 +75,8 @@ const useStyles = makeStyles(theme => ({
     fontWeight: 500
   },
   mono: {
-    fontSize: 'larger',
     fontFamily: 'monospace'
   },
-  searchresult: {
-    fontStyle: 'italic',
-    paddingTop: theme.spacing(0.5),
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
   title: {
     cursor: 'pointer',
     '&:hover, &:focus': {

diff --git a/src/components/routes/manage/signatures.tsx b/src/components/routes/manage/signatures.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',

diff --git a/src/components/routes/manage/workflows.tsx b/src/components/routes/manage/workflows.tsx
@@ -27,7 +27,8 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
   },
   drawerPaper: {
     width: '80%',

diff --git a/src/components/routes/search.tsx b/src/components/routes/search.tsx
@@ -299,7 +299,15 @@ function Search({ index }: SearchProps) {
               </Tabs>
             </Paper>
           )}
-          <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', marginBottom: theme.spacing(0.5) }}>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              marginBottom: theme.spacing(0.5),
+              justifyContent: 'flex-end'
+            }}
+          >
             {resMap[tab] && resMap[tab].total !== 0 && (index || id) && (
               <div className={classes.searchresult}>
                 <SearchResultCount count={resMap[tab].total} />

diff --git a/src/components/routes/submission/report.tsx b/src/components/routes/submission/report.tsx
@@ -686,7 +686,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.md5 : <Skeleton />}
               </Grid>
@@ -699,7 +699,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.sha1 : <Skeleton />}
               </Grid>
@@ -712,7 +712,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.sha256 : <Skeleton />}
               </Grid>
@@ -725,7 +725,7 @@ export default function SubmissionReport() {
                 xs={8}
                 md={9}
                 lg={10}
-                style={{ fontFamily: 'monospace', fontSize: 'larger', wordBreak: 'break-word' }}
+                style={{ fontFamily: 'monospace',  wordBreak: 'break-word' }}
               >
                 {report ? report.file_info.ssdeep : <Skeleton />}
               </Grid>

diff --git a/src/components/routes/submissions.tsx b/src/components/routes/submissions.tsx
@@ -25,6 +25,7 @@ const useStyles = makeStyles(theme => ({
     fontStyle: 'italic',
     paddingTop: theme.spacing(0.5),
     display: 'flex',
+    justifyContent: 'flex-end',
     flexWrap: 'wrap'
   }
 }));