Security UI Fixes

app/src/components/security/SecuritiesDialog.tsx

@@ -34,11 +34,7 @@ const SecuritiesDialog = (props: ISecuritiesDialogProps) => {
       dialogContext.setSnackbar({
         snackbarMessage: (
           <Typography variant="body2" component="div">
-            {ApplySecurityRulesI18N.applySecuritySuccess(
-              patch.stagedForApply.length,
-              patch.stagedForRemove.length,
-              props.submissionFeatureIds.length
-            )}
+            {ApplySecurityRulesI18N.applySecuritySuccess(props.submissionFeatureIds.length)}
           </Typography>
         ),
         open: true
@@ -61,7 +57,7 @@ const SecuritiesDialog = (props: ISecuritiesDialogProps) => {
   return (
     <EditDialog<IPatchFeatureSecurityRules>
       isLoading={isLoading}
-      dialogTitle={hasSecurity ? 'Edit Security Reasons' : ' Add Security Reasons'}
+      dialogTitle={hasSecurity ? 'Edit Security' : ' Add Security'}
       open={props.open}
       dialogSaveButtonLabel="APPLY"
       onCancel={props.onClose}

app/src/components/security/SecurityRuleActionCard.tsx

@@ -17,11 +17,10 @@
       variant="outlined"
       sx={{
         display: 'flex',
-        px: 2,
-        py: 1.5,
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
+        p: 2,
         background: grey[100]
       }}>
       <SecurityRuleCard {...rest} />
@@ -30,7 +29,15 @@
           <Icon path={mdiClose} size={1} />
         </IconButton>
       ) : (
-        <Button variant={props.action === 'remove' ? 'contained' : 'outlined'} color="error" onClick={() => onRemove()}>
+        <Button
+          variant={props.action === 'remove' ? 'contained' : 'outlined'}
+          color="error"
+          sx={{
+            width: '6rem',
+            fontWeight: 700,
+            letterSpacing: '0.02rem'
+          }}
+          onClick={() => onRemove()}>
           Remove
         </Button>
       )}

app/src/components/security/SecurityRuleCard.tsx

@@ -1,5 +1,5 @@
-import { Box, Typography } from '@mui/material';
-import { Stack } from '@mui/system';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
 
 export interface ISecurityRuleCardProps {
   key?: string | number;
@@ -11,46 +11,47 @@
 
 const SecurityRuleCard = (props: ISecurityRuleCardProps) => {
   return (
-    <Box>
-      <Typography variant="body2" color="textSecondary">
+    <Stack gap={0.75} mt={-0.25}>
+      <Typography variant="body2" component="div" color="textSecondary" textTransform="uppercase">
         {props.category}
       </Typography>
-      <Typography
-        variant="body1"
-        fontWeight={700}
-        gutterBottom
-        sx={{
-          display: '-webkit-box',
-          WebkitLineClamp: '2',
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        }}>
-        {props.title}
-      </Typography>
-      <Typography
-        variant="body2"
-        color="textSecondary"
-        sx={{
-          display: '-webkit-box',
-          maxWidth: '92ch',
-          WebkitLineClamp: '2',
-          WebkitBoxOrient: 'vertical',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis'
-        }}>
-        {props.description}
-      </Typography>
+      <Stack>
+        <Typography
+          variant="body1"
+          fontWeight={700}
+          sx={{
+            display: '-webkit-box',
+            WebkitLineClamp: '2',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}>
+          {props.title}
+        </Typography>
+        <Typography
+          variant="body1"
+          color="textSecondary"
+          sx={{
+            display: '-webkit-box',
+            maxWidth: '92ch',
+            WebkitLineClamp: '2',
+            WebkitBoxOrient: 'vertical',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+          }}>
+          {props.description}
+        </Typography>
+      </Stack>
       {props.featureMembers && props.featureMembers?.length && (
-        <Stack component="ul" mt={1} pl={0} mb={0} display="flex" flexDirection="row" gap={2}>
+        <Stack component="ul" flexDirection="row" gap={2} mt={0.75} mb={0} p={0}>
           {props.featureMembers.map((featureMember) => (
-            <Typography variant="body2" color="textSecondary" sx={{ display: 'block' }} component="li">
+            <Typography component="li" variant="body2" color="textSecondary" fontWeight={700} sx={{ display: 'block' }}>
               {featureMember}
             </Typography>
           ))}
         </Stack>
       )}
-    </Box>
+    </Stack>
   );
 };
 

app/src/components/security/SecurityRuleForm.tsx

@@ -97,7 +97,7 @@
           return ruleGroups;
         }, [])
     );
   }, [initialAppliedSecurityRules, submissionFeatureGroupsDataLoader.data]);
 
   const toggleStageApply = (securityRule: ISecurityRuleAndCategory) => {
     if (
@@ -144,13 +144,11 @@
           sx={{
             maxWidth: '72ch'
           }}>
-          Specify reasons why this information should be secured.
+          Manage security rules for features in this submission.
         </Typography>
 
-        <Box mt={3}>
-          <Box mb={2}>
-            <Typography component="legend">Add Security Rules</Typography>
-          </Box>
+        <Box component="fieldset" mt={3}>
+          <Typography component="legend">Add Security Rules</Typography>
           <Autocomplete
             value={null}
             id={'autocomplete-security-rule-search'}
@@ -209,10 +207,11 @@
             renderOption={(renderProps, renderOption) => {
               return (
                 <ListItem
+                  disablePadding
                   divider
                   sx={{
-                    px: 2,
-                    py: '12px !important'
+                    py: '12px !important',
+                    px: 2
                   }}
                   {...renderProps}>
                   <SecurityRuleCard
@@ -224,61 +223,62 @@
               );
             }}
           />
+          <Stack component={TransitionGroup} gap={1} my={1}>
+            {formikProps.values.stagedForApply.map((applyingRule) => {
+              return (
+                <Collapse key={applyingRule.security_rule_id}>
+                  <SecurityRuleActionCard
+                    action={'apply'}
+                    title={applyingRule.name}
+                    category={applyingRule.category_name}
+                    description={applyingRule.description}
+                    onRemove={() => toggleStageApply(applyingRule)}
+                  />
+                </Collapse>
+              );
+            })}
+          </Stack>
         </Box>
 
-        <Stack component={TransitionGroup} gap={1} my={1}>
-          {formikProps.values.stagedForApply.map((applyingRule) => {
-            return (
-              <Collapse key={applyingRule.security_rule_id}>
-                <SecurityRuleActionCard
-                  action={'apply'}
-                  title={applyingRule.name}
-                  category={applyingRule.category_name}
-                  description={applyingRule.description}
-                  onRemove={() => toggleStageApply(applyingRule)}
-                />
-              </Collapse>
-            );
-          })}
-        </Stack>
-
-        <Box my={2}>
+        <Box component="fieldset" mt={3}>
           <Typography component="legend">Manage Existing Security</Typography>
-          <Typography variant="body2">
-            These rules have already been applied to one or more of the selected features.
+          <Typography variant="body1" color="textSecondary" sx={{ mt: -0.5 }}>
+            Manage security rules have already been applied.
           </Typography>
-        </Box>
-        <Stack component={TransitionGroup} gap={1}>
-          {groupedAppliedSecurityRules.map((group: IAppliedSecurityRuleGroup) => {
-            const cardAction = formikProps.values.stagedForRemove.some(
-              (removingRule) => removingRule.security_rule_id === group.securityRule.security_rule_id
-            )
-              ? 'remove'
-              : 'persist';
 
-            return (
-              <Collapse key={group.securityRule.security_rule_id}>
-                <SecurityRuleActionCard
-                  action={cardAction}
-                  title={group.securityRule.name}
-                  category={group.securityRule.category_name}
-                  description={group.securityRule.description}
-                  featureMembers={group.appliedFeatureGroups.map(
-                    (featureGroup) =>
-                      `${p(featureGroup.numFeatures, featureGroup.displayName)} (${featureGroup.numFeatures})`
-                  )}
-                  onRemove={() => toggleStageRemove(group.securityRule)}
-                />
-              </Collapse>
-            );
-          })}
-        </Stack>
-        {hasNoSecuritySelected && (
-          <Alert severity="error" sx={{ marginTop: 1 }}>
-            <AlertTitle>Open access to all records</AlertTitle>
-            All users will have unrestricted access to records that have been included in this submission.
-          </Alert>
-        )}
+          <Stack component={TransitionGroup} gap={1} mt={3}>
+            {groupedAppliedSecurityRules.map((group: IAppliedSecurityRuleGroup) => {
+              const cardAction = formikProps.values.stagedForRemove.some(
+                (removingRule) => removingRule.security_rule_id === group.securityRule.security_rule_id
+              )
+                ? 'remove'
+                : 'persist';
+
+              return (
+                <Collapse key={group.securityRule.security_rule_id}>
+                  <SecurityRuleActionCard
+                    action={cardAction}
+                    title={group.securityRule.name}
+                    category={group.securityRule.category_name}
+                    description={group.securityRule.description}
+                    featureMembers={group.appliedFeatureGroups.map(
+                      (featureGroup) =>
+                        `${p(featureGroup.numFeatures, featureGroup.displayName)} (${featureGroup.numFeatures})`
+                    )}
+                    onRemove={() => toggleStageRemove(group.securityRule)}
+                  />
+                </Collapse>
+              );
+            })}
+          </Stack>
+
+          {hasNoSecuritySelected && (
+            <Alert severity="error">
+              <AlertTitle>No security applied</AlertTitle>
+              All users will have unrestricted access to records that have been included in this submission.
+            </Alert>
+          )}
+        </Box>
       </Box>
     </form>
   );

app/src/constants/i18n.ts

@@ -26,22 +26,15 @@ export const DeleteSystemUserI18N = {
 };
 
 export const ApplySecurityRulesI18N = {
-  applySecuritySuccess: (numApplied: number, numRemoved: number, featureCount: number) => {
-    const appliedRemoved = [
-      numApplied > 0 && `applied ${numApplied} ${p(numApplied, 'security rule')}`,
-      numRemoved > 0 && `removed ${numRemoved} ${p(numRemoved, 'security rule')}`
-    ]
-      .filter(Boolean)
-      .join(' and ');
-
-    return `Successfully ${appliedRemoved} for ${featureCount} ${p(featureCount, 'feature')}.`;
+  applySecuritySuccess: (featureCount: number) => {
+    return `Updated security for ${featureCount} ${p(featureCount, 'feature')}.`;
   },
 
-  applySecurityRulesErrorTitle: 'Error Applying Security',
+  applySecurityRulesErrorTitle: 'Error applying security rules',
   applySecurityRulesErrorText:
     'An error occurred while applying security to features, please try again. If the problem persists, please contact your system administrator',
   unApplySecurityRulesSuccess: (submissionCount: number) => `Successfully unsecured: ${submissionCount} features`,
-  unapplySecurityRulesErrorTitle: 'Error Unsecuring Features',
+  unapplySecurityRulesErrorTitle: 'Error unsecuring features',
   unapplySecurityRulesErrorText:
     'Failed to unsecure the selected features, please try again. If the problem persists, please contact your system administrator'
 };

app/src/features/submissions/components/SubmissionDataGrid.tsx

@@ -84,11 +84,11 @@ export const SubmissionDataGrid = (props: ISubmissionDataGridProps) => {
             alignItems="center"
             gap={1}
             sx={{
-              color: 'text.secondary'
+              color: 'error.main'
             }}>
             <Icon path={mdiLockOpenOutline} size={0.75} />
-            <Typography component="span" sx={{ textTransform: 'uppercase' }}>
-              Unsecured
+            <Typography component="span" textTransform="uppercase">
+              Unsecuredasdfasdfsd
             </Typography>
           </Stack>
         );

app/src/features/submissions/components/SubmissionDataGrid/useSubmissionDataGridColumns.tsx

@@ -81,24 +81,18 @@ const useSubmissionDataGridColumns = (featureTypeName: string): GridColDef[] =>
       renderCell: (params) => {
         if (params.value.length > 0) {
           return (
-            <Stack flexDirection="row" alignItems="center" gap={1}>
+            <Stack flexDirection="row" alignItems="center" gap={1} color="error.main">
               <Icon path={mdiLock} size={0.75} />
-              <Typography component="span" sx={{ textTransform: 'uppercase' }}>
+              <Typography variant="body2" component="span" fontWeight={700} textTransform="uppercase">
                 Secured
               </Typography>
             </Stack>
           );
         }
         return (
-          <Stack
-            flexDirection="row"
-            alignItems="center"
-            gap={1}
-            sx={{
-              color: 'text.secondary'
-            }}>
+          <Stack flexDirection="row" alignItems="center" gap={1} color="error.main">
             <Icon path={mdiLockOpenOutline} size={0.75} />
-            <Typography component="span" sx={{ textTransform: 'uppercase' }}>
+            <Typography variant="body2" component="span" fontWeight={700} textTransform="uppercase">
               Unsecured
             </Typography>
           </Stack>