(People Picker) Deterministic Suggestions Resolution (#51)

* fixes issue with suggestions not resolving correctly
fixes other minor typos and consistency issues

* fix casing on peoplepicker file

Author: scottdurow

PeoplePicker/PeoplePicker/ControlManifest.Input.xml

@@ -7,7 +7,7 @@
     <property name="Error" display-name-key="Error" of-type="TwoOptions" usage="input" default-value="false" required="false" />
     <property name="MinimumSearchTermLength" description-key="MinimumSearchTermLength_Desc" display-name-key="MinimumSearchTermLength" required="true" usage="input" of-type="Whole.None" default-value="3" />
     <property name="SearchTermToShortMessage" description-key="SearchTermToShortMessage_Desc" display-name-key="SearchTermToShortMessage" required="true" usage="input" of-type="SingleLine.Text" default-value="Continue Typing..." />
-    <property name="NoResultFoundMesage" description-key="NoResultFoundMesage_Desc" display-name-key="NoResultFoundMesage" required="true" usage="input" of-type="SingleLine.Text" default-value="No results found" />
+    <property name="NoResultFoundMessage" description-key="NoResultFoundMessage_Desc" display-name-key="NoResultFoundMessage" required="true" usage="input" of-type="SingleLine.Text" default-value="No results found" />
     <property name="SuggestionsHeaderText" description-key="SuggestionsHeaderText_Desc" display-name-key="SuggestionsHeaderText" required="true" usage="input" of-type="SingleLine.Text" default-value="Suggested People" />
     <property name="HintText" description-key="HintText_Desc" display-name-key="HintText" required="true" usage="input" of-type="SingleLine.Text" default-value="Search" />
     <property name="MaxPeople" description-key="MaxPeople_Desc" display-name-key="MaxPeople" required="true" usage="input" of-type="Whole.None" default-value="10" />

PeoplePicker/PeoplePicker/__mocks__/mock-parameters.ts

@@ -17,7 +17,7 @@ export function getMockParameters(): IInputs {
         MinimumSearchTermLength: new MockWholeNumberProperty(),
         SearchTermToShortMessage: new MockStringProperty(),
         SuggestionsHeaderText: new MockStringProperty(),
-        NoResultFoundMesage: new MockStringProperty(),
+        NoResultFoundMessage: new MockStringProperty(),
         HintText: new MockStringProperty(),
         MaxPeople: new MockWholeNumberProperty(),
     };

PeoplePicker/PeoplePicker/__tests__/__snapshots__/peoplepicker-lifecycle.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`PeoplePicker renders 1`] = `
 <div
   className=
-      PowerCATPeoplepicker
+      PowerCATPeoplePicker
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;
@@ -150,7 +150,7 @@ exports[`PeoplePicker renders 1`] = `
 exports[`PeoplePicker renders with simple personas 1`] = `
 <div
   className=
-      PowerCATPeoplepicker
+      PowerCATPeoplePicker
       {
         -moz-osx-font-smoothing: grayscale;
         -webkit-font-smoothing: antialiased;

PeoplePicker/PeoplePicker/__tests__/peoplepicker-component.test.tsx

@@ -2,9 +2,9 @@ import { IBasePicker, IPersonaProps } from '@fluentui/react';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
-import { CanvasPeoplePicker } from '../components/PeoplePicker';
+import { CanvasPeoplePicker } from '../components/Peoplepicker';
 import { CanvasPeoplePickerProps } from '../components/Component.types';
-import { getDataSetfromPersona } from '../components/DatasetMapping';
+import { getDataSetFromPersona } from '../components/DatasetMapping';
 
 // Since requestAnimationFrame does not exist in the test DOM, mock it
 window.requestAnimationFrame = jest.fn().mockImplementation((callback) => {
@@ -29,7 +29,7 @@ describe('PeoplePickerComponent', () => {
 
     it('test getDataSetfromPersona function', () => {
         const personaValue = [{ key: '1', text: 'John Doe' }] as IPersonaProps[];
-        const personaOutput = getDataSetfromPersona(personaValue);
+        const personaOutput = getDataSetFromPersona(personaValue);
         expect(personaOutput[0].PersonaKey).toBe(personaOutput[0].PersonaKey);
     });
 
@@ -48,7 +48,7 @@ describe('PeoplePickerComponent', () => {
             width: 300,
             height: 32,
             people: [{ key: '1', text: 'John Doe' }] as IPersonaProps[],
-            peoplepickerType: 'normal people picker',
+            peoplePickerType: 'normal people picker',
             defaultSelected: [] as IPersonaProps[],
             delayResults: false,
             isPickerDisabled: false,
@@ -66,7 +66,7 @@ describe('PeoplePickerComponent', () => {
             keepTypingMessage: 'Continue typing...',
             suggestionsHeaderText: 'Suggested People',
             filterSuggestions: filterSuggestions,
-            noresultfoundText: 'no result found',
+            noResultFoundText: 'no result found',
             onBlur: onBlur,
             onFocus: onFocus,
             hintText: 'Search',

PeoplePicker/PeoplePicker/components/Component.types.ts

@@ -12,7 +12,7 @@ export interface CanvasPeoplePickerProps {
     visible?: boolean;
     isPickerDisabled: boolean;
     showSecondaryText: boolean;
-    peoplepickerType: string;
+    peoplePickerType: string;
     error?: boolean;
     componentRef?: IRefObject<IBasePicker<IPersonaProps>>;
     onResize?: (width: number, height: number) => void;
@@ -24,7 +24,7 @@ export interface CanvasPeoplePickerProps {
     onBlur: () => void;
     minimumFilterLength: number;
     keepTypingMessage: string;
-    noresultfoundText: string;
+    noResultFoundText: string;
     suggestionsHeaderText: string;
     hintText: string;
     maxPeople: number;

PeoplePicker/PeoplePicker/components/DatasetMapping.ts

@@ -71,7 +71,7 @@ export function getPersonaPresence(personaPresence: string): PersonaPresence {
     }
 }
 
-export function getDataSetfromPersona(selectedPeople: IPersonaProps[]): ICustomPersonaProps[] {
+export function getDataSetFromPersona(selectedPeople: IPersonaProps[]): ICustomPersonaProps[] {
     return selectedPeople.map((user) => {
         return {
             PersonaKey: user.key,

PeoplePicker/PeoplePicker/components/Peoplepicker.tsx

@@ -26,10 +26,10 @@ export const CanvasPeoplePicker = React.memo((props: CanvasPeoplePickerProps) =>
         filterSuggestions,
         minimumFilterLength,
         keepTypingMessage,
-        noresultfoundText,
+        noResultFoundText,
         isPickerDisabled,
         error,
-        peoplepickerType,
+        peoplePickerType,
         accessibilityLabel,
         suggestionsHeaderText,
         componentRef,
@@ -45,16 +45,16 @@ export const CanvasPeoplePicker = React.memo((props: CanvasPeoplePickerProps) =>
 
     const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(suggestedPeople);
     const prevSelectedPeople = usePrevious(defaultSelected);
-    const prevpeopleList = usePrevious(suggestedPeople);
+    const prevPeopleList = usePrevious(suggestedPeople);
     const [searchTerm, setSearchTerm] = React.useState<string>('');
-    const [pickerKey, setPickerKey] = React.useState<string>(peoplepickerType.split(' ')[0]);
+    const [pickerKey, setPickerKey] = React.useState<string>(peoplePickerType.split(' ')[0]);
     const suggestionProps: IBasePickerSuggestionsProps = {
         suggestionsHeaderText: suggestionsHeaderText,
         mostRecentlyUsedHeaderText: suggestionsHeaderText,
         noResultsFoundText:
             searchTerm && minimumFilterLength && searchTerm.length < minimumFilterLength
                 ? keepTypingMessage
-                : noresultfoundText,
+                : noResultFoundText,
         loadingText: 'Loading',
         showRemoveButtons: true,
         suggestionsAvailableAlertText: 'People Picker Suggestions available',
@@ -80,10 +80,10 @@ export const CanvasPeoplePicker = React.memo((props: CanvasPeoplePickerProps) =>
             // To re-render the existing component during pre-selected members change
             setPickerKey(pickerKey.concat('_1'));
         }
-        if (prevpeopleList !== suggestedPeople) {
+        if (prevPeopleList !== suggestedPeople) {
             setPeopleList(suggestedPeople);
         }
-    }, [onPersonSelect, pickerKey, suggestedPeople, defaultSelected, prevSelectedPeople, prevpeopleList]);
+    }, [onPersonSelect, pickerKey, suggestedPeople, defaultSelected, prevSelectedPeople, prevPeopleList]);
 
     const rootStyle = React.useMemo(() => {
         // This is needed for custom pages to ensure the People Picker grows to the full width
@@ -147,7 +147,7 @@ export const CanvasPeoplePicker = React.memo((props: CanvasPeoplePickerProps) =>
             onPersonSelect([]);
         }
     };
-    const peoplepickerProps: IPeoplePickerProps = {
+    const peoplePickerProps: IPeoplePickerProps = {
         // eslint-disable-next-line react/jsx-no-bind
         onResolveSuggestions: filterSuggestedUsers,
         getTextFromItem: getTextFromItem,
@@ -173,17 +173,17 @@ export const CanvasPeoplePicker = React.memo((props: CanvasPeoplePickerProps) =>
         onChange: onChange,
     } as IPeoplePickerProps;
     return (
-        <ThemeProvider theme={theme} ref={target} className={'PowerCATPeoplepicker'} style={rootStyle}>
+        <ThemeProvider theme={theme} ref={target} className={'PowerCATPeoplePicker'} style={rootStyle}>
             {(() => {
-                switch (peoplepickerType.toLowerCase()) {
+                switch (peoplePickerType.toLowerCase()) {
                     case 'normal people picker':
-                        return <NormalPeoplePicker {...peoplepickerProps} />;
+                        return <NormalPeoplePicker {...peoplePickerProps} />;
                     case 'list people picker':
-                        return <ListPeoplePicker {...peoplepickerProps} />;
+                        return <ListPeoplePicker {...peoplePickerProps} />;
                     case 'compact people picker':
-                        return <CompactPeoplePicker {...peoplepickerProps} />;
+                        return <CompactPeoplePicker {...peoplePickerProps} />;
                     default:
-                        return <NormalPeoplePicker {...peoplepickerProps} />;
+                        return <NormalPeoplePicker {...peoplePickerProps} />;
                 }
             })()}
         </ThemeProvider>

PeoplePicker/PeoplePicker/css/PeoplePicker.css

@@ -1,7 +1,7 @@
 /* Error Condition Overrides*/
-.PowerCATPeoplepicker .error-condition .ms-BasePicker-text,
-.PowerCATPeoplepicker .error-condition .ms-BasePicker-text:hover,
-.PowerCATPeoplepicker .error-condition .ms-BasePicker-text::after {
+.PowerCATPeoplePicker .error-condition .ms-BasePicker-text,
+.PowerCATPeoplePicker .error-condition .ms-BasePicker-text:hover,
+.PowerCATPeoplePicker .error-condition .ms-BasePicker-text::after {
     border-color: #BA3D22 !important;
 }