From 8e085fb275bf4aea121c3e9bb6bbf127300cd12b Mon Sep 17 00:00:00 2001
From: jeznorth <twenty15creative@gmail.com>
Date: Fri, 19 Jan 2024 10:37:34 -0800
Subject: [PATCH] Iterating on dialog language

---
 .../components/security/SecurityRuleForm.tsx  | 261 +++++++++---------
 1 file changed, 126 insertions(+), 135 deletions(-)

diff --git a/app/src/components/security/SecurityRuleForm.tsx b/app/src/components/security/SecurityRuleForm.tsx
index e922cf21..6e88c015 100644
--- a/app/src/components/security/SecurityRuleForm.tsx
+++ b/app/src/components/security/SecurityRuleForm.tsx
@@ -137,148 +137,139 @@ const SecurityRuleForm = () => {
 
   return (
     <form onSubmit={formikProps.handleSubmit}>
-      <Box component="fieldset">
-        <Typography
-          variant="body1"
-          color="textSecondary"
-          sx={{
-            maxWidth: '72ch'
-          }}>
-          Manage security rules for features in this submission.
+      <Box component="fieldset" mt={1}>
+        <Typography component="legend">Add Security Rules</Typography>
+        <Typography variant="body1" color="textSecondary" sx={{ mt: -1, mb: 3 }}>
+          Select one or more security rules to apply to selected records.
         </Typography>
+        <Autocomplete
+          value={null}
+          id={'autocomplete-security-rule-search'}
+          data-testid={'autocomplete-security-rule-search'}
+          filterSelectedOptions
+          clearOnBlur
+          loading={submissionContext.allSecurityRulesStaticListDataLoader.isLoading}
+          noOptionsText="No records found"
+          options={applyRulesAvailableSortedOptions}
+          filterOptions={(options, state) => {
+            const searchFilter = createFilterOptions<ISecurityRuleAndCategory>({
+              ignoreCase: true,
+              matchFrom: 'any',
+              stringify: (option) => option.name + option.category_name
+            });
 
-        <Box component="fieldset" mt={3}>
-          <Typography component="legend">Add Security Rules</Typography>
-          <Autocomplete
-            value={null}
-            id={'autocomplete-security-rule-search'}
-            data-testid={'autocomplete-security-rule-search'}
-            filterSelectedOptions
-            clearOnBlur
-            loading={submissionContext.allSecurityRulesStaticListDataLoader.isLoading}
-            noOptionsText="No records found"
-            options={applyRulesAvailableSortedOptions}
-            filterOptions={(options, state) => {
-              const searchFilter = createFilterOptions<ISecurityRuleAndCategory>({
-                ignoreCase: true,
-                matchFrom: 'any',
-                stringify: (option) => option.name + option.category_name
-              });
-
-              const selectableOptions = options.filter((securityRule) => {
-                return !formikProps.values.stagedForApply.some(
-                  (applyingRule) => applyingRule.security_rule_id === securityRule.security_rule_id
-                );
-              });
-
-              return searchFilter(selectableOptions, state);
-            }}
-            getOptionLabel={(option) => option.name}
-            isOptionEqualToValue={(option, value) => option.security_rule_id === value.security_rule_id}
-            inputValue={searchText}
-            onInputChange={(_, value, reason) => {
-              if (reason === 'reset') {
-                setSearchText('');
-              } else {
-                setSearchText(value);
-              }
-            }}
-            onChange={(_, option) => {
-              if (option) {
-                toggleStageApply(option);
-              }
-            }}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                variant="outlined"
-                placeholder={'Add security reasons'}
-                fullWidth
-                InputProps={{
-                  ...params.InputProps,
-                  startAdornment: (
-                    <Box mx={1} mt="6px">
-                      <Icon path={mdiMagnify} size={1}></Icon>
-                    </Box>
-                  )
-                }}
-              />
-            )}
-            renderOption={(renderProps, renderOption) => {
-              return (
-                <ListItem
-                  disablePadding
-                  divider
-                  sx={{
-                    py: '12px !important',
-                    px: 2
-                  }}
-                  {...renderProps}>
-                  <SecurityRuleCard
-                    title={renderOption.name}
-                    category={renderOption.category_name}
-                    description={renderOption.description}
-                  />
-                </ListItem>
-              );
-            }}
-          />
-          <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>
+            const selectableOptions = options.filter((securityRule) => {
+              return !formikProps.values.stagedForApply.some(
+                (applyingRule) => applyingRule.security_rule_id === securityRule.security_rule_id
               );
-            })}
-          </Stack>
-        </Box>
+            });
 
-        <Box component="fieldset" mt={3}>
-          <Typography component="legend">Manage Existing Security</Typography>
-          <Typography variant="body1" color="textSecondary" sx={{ mt: -0.5 }}>
-            Manage security rules have already been applied.
-          </Typography>
+            return searchFilter(selectableOptions, state);
+          }}
+          getOptionLabel={(option) => option.name}
+          isOptionEqualToValue={(option, value) => option.security_rule_id === value.security_rule_id}
+          inputValue={searchText}
+          onInputChange={(_, value, reason) => {
+            if (reason === 'reset') {
+              setSearchText('');
+            } else {
+              setSearchText(value);
+            }
+          }}
+          onChange={(_, option) => {
+            if (option) {
+              toggleStageApply(option);
+            }
+          }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant="outlined"
+              placeholder={'Security rules'}
+              fullWidth
+              InputProps={{
+                ...params.InputProps,
+                startAdornment: (
+                  <Box mx={1} mt="6px">
+                    <Icon path={mdiMagnify} size={1}></Icon>
+                  </Box>
+                )
+              }}
+            />
+          )}
+          renderOption={(renderProps, renderOption) => {
+            return (
+              <ListItem
+                disablePadding
+                divider
+                sx={{
+                  py: '12px !important',
+                  px: 2
+                }}
+                {...renderProps}>
+                <SecurityRuleCard
+                  title={renderOption.name}
+                  category={renderOption.category_name}
+                  description={renderOption.description}
+                />
+              </ListItem>
+            );
+          }}
+        />
+        <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>
+      <Box component="fieldset" mt={2}>
+        <Typography component="legend">Secured Records</Typography>
+        <Typography variant="body1" color="textSecondary" sx={{ mt: -1 }}>
+          Some of the selected records have been secured using one or more of the following rules.
+        </Typography>
 
-          <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';
+        <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>
+            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>
+        {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>
     </form>
   );