display border for groups

Author: lipalath-ms

UI/web-app/src/components/HRQuerySource/HRQuerySource.base.tsx

@@ -1529,7 +1529,7 @@ const checkType = (value: string, type: string | undefined): string => {
         <ActionButton iconProps={{ iconName: 'ChevronDown' }} onClick={() => onGroupDownClick(index)} style={{ marginBottom: '-15px'}} />
       </div>)}
       <DetailsList
-        styles={{ root: classNames.detailsList }}
+        styles={{ root: groups.length > 1 && items.length > 1 ? classNames.detailsListWithBorder : classNames.detailsList }}
         items={items}
         columns={columns}
         onRenderItemColumn={(item, index, column) => onRenderItemColumn(items, item, index, column)}

UI/web-app/src/components/HRQuerySource/HRQuerySource.styles.ts

@@ -45,7 +45,14 @@ export const getStyles = (props: HRQuerySourceStyleProps): HRQuerySourceStyles =
       border: 'none'
     },
     detailsList: {
-      minWidth: 1500
+      minWidth: 1200
+    },
+    detailsListWithBorder: {
+      minWidth: 1200,
+      borderStyle: 'solid',
+      borderRadius: 15,
+      borderColor: theme.palette.themeLighter,
+      marginLeft: 50
     },
     dropdownTitle: {
       borderRadius: 4,

UI/web-app/src/components/HRQuerySource/HRQuerySource.types.ts

@@ -8,6 +8,7 @@ import { HRSourcePartSource } from '../../models/HRSourcePart';
 export type HRQuerySourceStyles = {
   root: IStyle;
   detailsList: IStyle;
+  detailsListWithBorder: IStyle;
   textFieldGroup: IStyle;
   textField: IStyle;
   spinButton: IStyle;