DT-1219: Allow un-selecting auth domains on snapshot create (#1753)

Author: snf2ye

src/components/common/FullViewSnapshotButton.test.tsx

@@ -94,9 +94,9 @@ describe('FullViewSnapshotButton', () => {
 
     it('allows selecting an auth domain', () => {
       cy.get('button').click();
-      cy.get('#authorization-domain-select').parent().click();
+      cy.get('#select-authorization-domain-select').parent().click();
       cy.get('[data-cy=menuItem-group2]').click();
-      cy.get('#authorization-domain-select').should('have.value', 'group2');
+      cy.get('#select-authorization-domain-select').should('have.value', 'group2');
     });
 
     it('allows changing the name and description', () => {

src/components/common/FullViewSnapshotButton.tsx

@@ -181,7 +181,7 @@ function FullViewSnapshotButton({
           <div style={{ marginTop: 8 }}>
             <FormLabel
               sx={{ fontWeight: 600, color: 'black' }}
-              htmlFor="authorization-domain-select"
+              htmlFor="select-authorization-domain-select"
             >
               Authorization Domain
               <span style={{ fontWeight: 400, color: 'black' }}> - (optional)</span>
@@ -191,9 +191,10 @@ function FullViewSnapshotButton({
             sx={{ height: '2.5rem' }}
             disabled={userGroups ? userGroups.length <= 1 : true}
             options={userGroups ? userGroups.map((group) => group.groupName) : []}
-            name="authorization-domain"
+            name="Select Authorization Domain"
             onSelectedItem={(event) => setSelectedAuthDomain(event.target.value)}
             value={selectedAuthDomain || ''}
+            includeNoneOption={true}
           />
           <div>
             Authorization Domains restrict data access to only specified individuals in a group and

src/components/dataset/data/JadeDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
-import { MenuItem, FormControl, Select, SelectChangeEvent } from '@mui/material';
+import { MenuItem, FormControl, Select, SelectChangeEvent, Box } from '@mui/material';
 
 type IProps<T> = {
   disabled: boolean;
@@ -9,9 +9,18 @@ type IProps<T> = {
   options: T[];
   value: T;
   sx?: React.CSSProperties;
+  includeNoneOption?: boolean;
 };
 
-function JadeDropdown({ disabled, name, onSelectedItem, options, value, sx }: IProps<string>) {
+function JadeDropdown({
+  disabled,
+  name,
+  onSelectedItem,
+  options,
+  value,
+  sx,
+  includeNoneOption,
+}: IProps<string>) {
   return (
     <form autoComplete="off">
       <FormControl disabled={disabled} variant="outlined" fullWidth>
@@ -20,13 +29,18 @@ function JadeDropdown({ disabled, name, onSelectedItem, options, value, sx }: IP
           onChange={(event) => onSelectedItem(event)}
           inputProps={{
             name,
-            id: `${name}-select`,
+            id: `${_.kebabCase(name)}-select`,
           }}
           displayEmpty
           renderValue={(val) => (!val ? name : val)}
           data-cy={_.camelCase(name)}
           sx={sx}
         >
+          {includeNoneOption && (
+            <MenuItem key="None" value="">
+              <Box sx={{ fontStyle: 'italic' }}>None</Box>
+            </MenuItem>
+          )}
           {options.map((opt) => (
             <MenuItem key={opt} value={opt} data-cy={`menuItem-${opt}`}>
               {opt}