Skip to content

Commit 2f0819f

Browse files
lipalath-mslipalath-ms
committed
address comments
1 parent cda6733 commit 2f0819f

File tree

4 files changed

+19
-53
lines changed

4 files changed

+19
-53
lines changed

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

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Licensed under the MIT license.
33

44
import React, { useEffect, useRef, useState } from 'react';
5-
import { classNamesFunction, Stack, type IProcessedStyleSet, IStackTokens, Label, IconButton, TooltipHost, ChoiceGroup, IChoiceGroupOption, SpinButton, NormalPeoplePicker, DirectionalHint, IDropdownOption, ActionButton, DetailsList, DetailsListLayoutMode, Dropdown, Selection, IColumn, ComboBox, IComboBoxOption, IComboBox, IDragDropEvents, SelectionMode, IDropdownStyles} from '@fluentui/react';
5+
import { classNamesFunction, Stack, type IProcessedStyleSet, IStackTokens, Label, IconButton, TooltipHost, ChoiceGroup, IChoiceGroupOption, SpinButton, NormalPeoplePicker, DirectionalHint, IDropdownOption, ActionButton, DetailsList, DetailsListLayoutMode, Dropdown, Selection, IColumn, ComboBox, IComboBoxOption, IComboBox, IDropdownStyles} from '@fluentui/react';
66
import { useTheme } from '@fluentui/react/lib/Theme';
77
import { TextField } from '@fluentui/react/lib/TextField';
88
import { IPersonaProps } from '@fluentui/react/lib/Persona';
@@ -22,7 +22,7 @@ import { selectJobOwnerFilterSuggestions } from '../../store/jobs.slice';
2222
import { manageMembershipIsEditingExistingJob } from '../../store/manageMembership.slice';
2323
import { fetchDefaultSqlMembershipSourceAttributes } from '../../store/sqlMembershipSources.api';
2424
import { fetchAttributeValues } from '../../store/sqlMembershipSources.api';
25-
import { selectAttributes, selectSource, selectAttributeValues, selectFilterGroups, setFilterGroups } from '../../store/sqlMembershipSources.slice';
25+
import { selectAttributes, selectSource, selectAttributeValues } from '../../store/sqlMembershipSources.slice';
2626
import { SqlMembershipAttribute, SqlMembershipAttributeValue } from '../../models';
2727
import { IFilterPart } from '../../models/IFilterPart';
2828

@@ -60,12 +60,12 @@ export const HRQuerySourceBase: React.FunctionComponent<HRQuerySourceProps> = (p
6060
const objectIdEmployeeIdMapping = useSelector(selectObjectIdEmployeeIdMapping);
6161
const ownerPickerSuggestions = useSelector(selectJobOwnerFilterSuggestions);
6262
const isEditingExistingJob = useSelector(manageMembershipIsEditingExistingJob);
63-
const filterGroups = useSelector(selectFilterGroups);
6463
const [isDragAndDropEnabled, setIsDragAndDropEnabled] = useState(false);
6564
const [isDisabled, setIsDisabled] = useState(true);
6665
const [includeOrg, setIncludeOrg] = useState(false);
6766
const [includeFilter, setIncludeFilter] = useState(false);
68-
const [errorMessage, setErrorMessage] = useState<string>('');
67+
const [orgErrorMessage, setOrgErrorMessage] = useState<string>('');
68+
const [filterErrorMessage, setFilterErrorMessage] = useState<string>('');
6969
const [source, setSource] = useState<HRSourcePartSource>(props.source);
7070
const [children, setChildren] = useState<ChildType[]>([]);
7171
const excludeLeaderQuery = `EmployeeId <> ${source.manager?.id}`
@@ -77,14 +77,10 @@ export const HRQuerySourceBase: React.FunctionComponent<HRQuerySourceProps> = (p
7777
const [items, setItems] = useState<IFilterPart[]>([]);
7878
let options: IComboBoxOption[] = [];
7979
let valueOptions: IComboBoxOption[] = [];
80-
const draggedItem = useRef<any | undefined>();
81-
const draggedIndex = useRef<number>(-1);
8280
const [groups, setGroups] = useState<Group[]>([]);
8381
const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
8482
const [groupingEnabled, setGroupingEnabled] = useState(false);
8583
const [filterTextEnabled, setFilterTextEnabled] = useState(false);
86-
const [groupQuery, setGroupQuery] = useState<string>();
87-
const [forceUpdate, setForceUpdate] = useState<number>(0);
8884

8985
useEffect(() => {
9086
if (!groupingEnabled) {
@@ -123,7 +119,7 @@ export const HRQuerySourceBase: React.FunctionComponent<HRQuerySourceProps> = (p
123119
}, [items]);
124120

125121
useEffect(() => {
126-
if (!includeOrg) { setErrorMessage(''); }
122+
if (!includeOrg) { setOrgErrorMessage(''); }
127123
}, [includeOrg]);
128124

129125

@@ -420,16 +416,12 @@ function setItemsBasedOnGroups(groups: Group[]) {
420416

421417
const getGroupLabels = (groups: Group[]) => {
422418
const str = stringifyGroups(groups);
423-
setGroupQuery(str);
424-
const groupQuery = str;
425-
const groupingEnabled = true;
426419
const filter = str;
427420
setSource(prevSource => {
428421
const newSource = { ...prevSource, filter };
429422
onSourceChange(newSource, partId);
430423
return newSource;
431424
});
432-
dispatch(setFilterGroups({partId, groupQuery, groupingEnabled}));
433425
}
434426

435427
const checkType = (value: string, type: string | undefined): string => {
@@ -520,7 +512,7 @@ const checkType = (value: string, type: string | undefined): string => {
520512

521513
useEffect(() => {
522514
if (orgLeaderDetails.employeeId === 0 && orgLeaderDetails.maxDepth === 0 && includeOrg && partId === orgLeaderDetails.partId) {
523-
setErrorMessage(hrSource?.name && hrSource?.name !== "" ?
515+
setOrgErrorMessage(hrSource?.name && hrSource?.name !== "" ?
524516
orgLeaderDetails.text + strings.HROnboarding.customOrgLeaderMissingErrorMessage + hrSource?.name + strings.HROnboarding.source :
525517
orgLeaderDetails.text + strings.HROnboarding.orgLeaderMissingErrorMessage);
526518
}
@@ -534,7 +526,7 @@ const checkType = (value: string, type: string | undefined): string => {
534526

535527
const handleOrgLeaderInputChange = (input: string): string => {
536528
setIncludeOrg(true);
537-
setErrorMessage('');
529+
setOrgErrorMessage('');
538530
dispatch(getJobOwnerFilterSuggestions({displayName: input, alias: input}))
539531
return input;
540532
}
@@ -555,7 +547,7 @@ const checkType = (value: string, type: string | undefined): string => {
555547
const handleDepthChange = React.useCallback((event: React.SyntheticEvent<HTMLElement>, newValue?: string) => {
556548
const nonNumericRegex = /[^0-9]/g;
557549
if (newValue && nonNumericRegex.test(newValue)) {
558-
setErrorMessage(strings.HROnboarding.invalidInputErrorMessage);
550+
setOrgErrorMessage(strings.HROnboarding.invalidInputErrorMessage);
559551
return;
560552
}
561553
const depth = newValue?.trim() !== '' ? Number(newValue) : undefined;
@@ -582,7 +574,7 @@ const checkType = (value: string, type: string | undefined): string => {
582574
};
583575

584576
const addComponent = () => {
585-
setErrorMessage('');
577+
setFilterErrorMessage('');
586578
setSource(props.source);
587579
const regex = /(?<= And | Or )/;
588580
let segments = props.source.filter?.split(regex);
@@ -599,7 +591,7 @@ const checkType = (value: string, type: string | undefined): string => {
599591
if (result || children.length === 0) {
600592
setChildren(prevChildren => [...prevChildren, { filter: ''}]);
601593
} else {
602-
setErrorMessage(strings.HROnboarding.missingAttributeErrorMessage);
594+
setFilterErrorMessage(strings.HROnboarding.missingAttributeErrorMessage);
603595
}
604596
};
605597

@@ -766,12 +758,12 @@ const checkType = (value: string, type: string | undefined): string => {
766758
}
767759

768760
const handleIncludeLeaderChange = (ev?: React.FormEvent<HTMLElement | HTMLInputElement>, option?: IChoiceGroupOption) => {
769-
setErrorMessage('');
761+
setOrgErrorMessage('');
770762
let filter: string;
771763
if (option?.key === "No") {
772764
if (!source.manager?.id)
773765
{
774-
setErrorMessage(hrSource?.name && hrSource?.name !== "" ?
766+
setOrgErrorMessage(hrSource?.name && hrSource?.name !== "" ?
775767
orgLeaderDetails.text + strings.HROnboarding.customOrgLeaderMissingErrorMessage + hrSource?.name + strings.HROnboarding.source :
776768
orgLeaderDetails.text + strings.HROnboarding.orgLeaderMissingErrorMessage);
777769
return;
@@ -1800,7 +1792,7 @@ const checkType = (value: string, type: string | undefined): string => {
18001792

18011793

18021794
<div className={classNames.error}>
1803-
{errorMessage}
1795+
{orgErrorMessage}
18041796
</div>
18051797
<br />
18061798

@@ -1847,13 +1839,13 @@ const checkType = (value: string, type: string | undefined): string => {
18471839
<ActionButton
18481840
iconProps={{ iconName: 'GroupObject' }}
18491841
onClick={onUnGroupClick}
1850-
disabled={!(selectedIndices.length > 0 && groups.length > 0 && (groupingEnabled || (filterGroups[partId] && filterGroups[partId].groupingEnabled)))}>
1842+
disabled={!(selectedIndices.length > 0 && groups.length > 0 && groupingEnabled)}>
18511843
Ungroup
18521844
</ActionButton>
18531845
<br/>
18541846

18551847

1856-
{(groupingEnabled || (filterGroups[partId] && filterGroups[partId].groupingEnabled) || groups != null) ? (
1848+
{(groupingEnabled || groups != null) ? (
18571849
<div>
18581850
{groups.map((group: Group, index: number) => (
18591851
<div>
@@ -1872,24 +1864,21 @@ const checkType = (value: string, type: string | undefined): string => {
18721864
selection={selection}
18731865
onRenderItemColumn={(item, index, column) => onRenderItemColumn(items, item, index, column)}
18741866
layoutMode={DetailsListLayoutMode.justified}
1875-
ariaLabelForSelectionColumn="Toggle selection"
1876-
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
1877-
checkButtonAriaLabel="select row"
18781867
styles={{
18791868
root: classNames.detailsList
18801869
}}
18811870
/>
18821871
)}
18831872

1884-
{groups.length <= 0 && <ActionButton iconProps={{ iconName: "CirclePlus" }} onClick={() => addComponent()}>
1873+
{(groups.length <= 0 || !groupingEnabled) && <ActionButton iconProps={{ iconName: "CirclePlus" }} onClick={() => addComponent()}>
18851874
{strings.HROnboarding.addAttribute}
18861875
</ActionButton>}
18871876
</div>
18881877
) : null
18891878
}
18901879

18911880
<div className={classNames.error}>
1892-
{errorMessage}
1881+
{filterErrorMessage}
18931882
</div>
18941883
</div>
18951884
);

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

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,6 @@ export const getStyles = (props: HRQuerySourceStyleProps): HRQuerySourceStyles =
6161
borderColor: theme.palette.neutralQuaternary,
6262
minWidth: 200
6363
},
64-
andor: {
65-
borderRadius: 4,
66-
borderStyle: 'solid',
67-
borderWidth: 1,
68-
borderColor: theme.palette.neutralQuaternary,
69-
minWidth: 20
70-
},
7164
upDown: {
7265
display: 'flex',
7366
flexDirection: 'column'

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export type HRQuerySourceStyles = {
1414
spinButton: IStyle;
1515
labelContainer: IStyle;
1616
dropdownTitle: IStyle;
17-
andor: IStyle;
1817
upDown: IStyle;
1918
horizontalChoiceGroup: IStyle;
2019
horizontalChoiceGroupContainer: IStyle;

‎UI/web-app/src/store/sqlMembershipSources.slice.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
55
import { fetchAttributeValues, fetchDefaultSqlMembershipSource, fetchDefaultSqlMembershipSourceAttributes, patchDefaultSqlMembershipSourceAttributes, patchDefaultSqlMembershipSourceCustomLabel } from './sqlMembershipSources.api';
66
import type { RootState } from './store';
77
import { SqlMembershipAttribute, SqlMembershipAttributeValue, SqlMembershipSource } from '../models';
8-
import { IFilterPart } from '../models/IFilterPart';
9-
import { Group } from '../models/Group';
108

119
export interface SettingsState {
1210

@@ -26,12 +24,6 @@ export interface SettingsState {
2624
error: string | undefined;
2725
patchResponse: any | undefined;
2826
patchError: string | undefined;
29-
filterGroups: {
30-
[partId: number]: {
31-
groupQuery: string;
32-
groupingEnabled: boolean;
33-
}
34-
};
3527
};
3628

3729
const initialState: SettingsState = {
@@ -45,8 +37,7 @@ const initialState: SettingsState = {
4537
areAttributesSaving: false,
4638
error: undefined,
4739
patchResponse: undefined,
48-
patchError: undefined,
49-
filterGroups: {}
40+
patchError: undefined
5041
};
5142

5243
const sqlMembershipSourcesSlice = createSlice({
@@ -58,11 +49,6 @@ const sqlMembershipSourcesSlice = createSlice({
5849
},
5950
setAttributes: (state, action: PayloadAction<SqlMembershipAttribute[] | undefined>) => {
6051
state.attributes = action.payload;
61-
},
62-
setFilterGroups: (state, action: PayloadAction<{partId: number, groupQuery: string, groupingEnabled: boolean}>) => {
63-
state.filterGroups[action.payload.partId] = {
64-
groupQuery: action.payload.groupQuery,
65-
groupingEnabled: action.payload.groupingEnabled };
6652
}
6753
},
6854
extraReducers: (builder) => {
@@ -140,11 +126,10 @@ const sqlMembershipSourcesSlice = createSlice({
140126
},
141127
});
142128

143-
export const { setSource, setAttributes, setFilterGroups } = sqlMembershipSourcesSlice.actions;
129+
export const { setSource, setAttributes } = sqlMembershipSourcesSlice.actions;
144130
export const selectSource = (state: RootState) => state.sqlMembershipSources.source;
145131
export const selectAttributes = (state: RootState) => state.sqlMembershipSources.attributes;
146132
export const selectAttributeValues = (state: RootState) => state.sqlMembershipSources.attributeValues;
147-
export const selectFilterGroups = (state: RootState) => state.sqlMembershipSources.filterGroups;
148133
export const selectIsSourceLoading = (state: RootState) => state.sqlMembershipSources.isSourceLoading;
149134
export const selectAreAttributesLoading = (state: RootState) => state.sqlMembershipSources.areAttributesLoading;
150135
export const selectAreAttributeValuesLoading = (state: RootState) => state.sqlMembershipSources.areAttributeValuesLoading;

0 commit comments

Comments
 (0)