group dropdown styling fixes

Author: lipalath-ms

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

@@ -1439,10 +1439,6 @@ const checkType = (value: string, type: string | undefined): string => {
     setGroupingEnabled(true);
   }
 
-  const dropdownStyles: Partial<IDropdownStyles> = {
-    dropdown: { width: 100 },
-  };
-
   const renderItems = (items: IFilterPart[], isUpDownEnabled: boolean, groupIndex: number, childIndex?: number) => {
     const selection: Selection = new Selection({
       onSelectionChanged: () => handleSelectionChange(selection)
@@ -1481,7 +1477,7 @@ const checkType = (value: string, type: string | undefined): string => {
             onChange={(event, option) => handleGroupOrAndOperatorChange(event, option, parentIndex)}
             selectedKey={group.andOr.charAt(0).toUpperCase() + group.andOr.slice(1).toLowerCase()}
             options={orAndOperatorOptions}
-            styles={dropdownStyles}
+            styles={group.children && group.children.length > 0 ?  { root: classNames.startOfNestedGroupDropdown } : { root: classNames.betweenGroupsDropdown }}
           />
           </div>
           )}
@@ -1504,7 +1500,7 @@ const checkType = (value: string, type: string | undefined): string => {
             onChange={(event, option) => handleGroupOrAndOperatorChange(event, option, parentIndex, childIndex)}
             selectedKey={childGroup.andOr.charAt(0).toUpperCase() + childGroup.andOr.slice(1).toLowerCase()}
             options={orAndOperatorOptions}
-            styles={dropdownStyles}
+            styles={parentIndex !== groups.length - 1 && childIndex === children.length - 1 ? { root: classNames.endOfNestedGroupDropdown } : { root: classNames.betweenChildrenDropdown }}
           />
           </div>
           )}

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

@@ -47,6 +47,22 @@ export const getStyles = (props: HRQuerySourceStyleProps): HRQuerySourceStyles =
     detailsList: {
       minWidth: 1200
     },
+    betweenGroupsDropdown: {
+      width: 100,
+      marginLeft: 0
+    },
+    betweenChildrenDropdown: {
+      maxWidth: 100,
+      marginLeft: 70
+    },
+    startOfNestedGroupDropdown: {
+      maxWidth: 100,
+      marginLeft: 70
+    },
+    endOfNestedGroupDropdown: {
+      maxWidth: 100,
+      marginLeft: -50
+    },
     detailsListWithBorder: {
       minWidth: 1200,
       borderStyle: 'solid',

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

@@ -20,6 +20,10 @@ export type HRQuerySourceStyles = {
   removeButton: IStyle;
   error: IStyle;
   addAttribute: IStyle;
+  betweenGroupsDropdown: IStyle;
+  betweenChildrenDropdown: IStyle;
+  startOfNestedGroupDropdown: IStyle;
+  endOfNestedGroupDropdown: IStyle;
 };
 
 export type HRQuerySourceStyleProps = {